CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designasp.net-mvc-5
Unbreakable
Unbreakable

Reputation: 8084

How to handle left padding/margin when using Container-Fluid in Bootstrap

I am a beginner in web development and I am stuck at one place in my ASP.Net MVC 5 Project.

In modern web sites, mostly, Container-Fluid is used to utilize full width of the browser when viewing homepage. But problem is now even when I go to Register form, there is no padding to the left. Basically, I wanted fluid for homepage, but when I go to register or even login page, I expect some padding.

My Layout File:

<div class="container-fluid body-content">
        @RenderBody()
</div>

Register Page View:

    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <div class="form-group">
                @Html.LabelFor(m => m.FirstName, new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
                </div>
            </div>
        <div class="form-group">
            @Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(m => m.LastName, new { @class = "form-control" })
            </div>
        </div>     
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>        
    }

P.S: I can harcode some padding, but since I am not very good with Responsive Web Design so I wanted to use inbuilt Twitter Classes. Can some one guide me on how to handle this scenario.

  1. Register text is completely touching the browser left panel.
  2. When I squeeze the browser then All the form field touches the browser panel.

enter image description here

enter image description here

Html Generated:

<div class="container-fluid body-content">
<h2>Register.</h2>
    <div class="form-group">
        <label class="col-md-2 control-label" for="FirstName">FirstName</label>
        <div class="col-md-8">
            <input class="form-control" data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="LastName">LastName</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The LastName field is required." id="LastName" name="LastName" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Password">Password</label>
        <div class="col-md-10">
            <input class="form-control">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register">
        </div>
    </div>
</div>

Please guide me how to handle this in a graceful way. Because I will face this left padding problem in all the pages.

Upvotes: 1

Views: 3012

Answers (2)

Tims
Tims

Reputation: 2007

To use the bootstrap grid correctly you should be using the proper classes from https://getbootstrap.com/docs/3.3/css/#grid

This should result in code like this:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      @RenderBody()
    </div>
  </div>
</div>

It looks like you are missing a div with the row class. Also you are missing some form elements (such as <form class="form-horizontal">). Check https://getbootstrap.com/docs/3.3/css/#forms-horizontal

You should not mix classes with with container-fluid like you have done with container-fluid body-content, especially when your additional classes (body-content) have padding or margin styles. This is because bootstrap uses container, container-fluid, row and col-x-x to provide correct margins and padding (container-fluid should give you a 15px padding by default).

You can use your browsers dev tools to inspect the different divs to see what styles are being applied by which classes. It may also be worth checking to see if any other styles are overriding bootstrap.

Upvotes: 3

jimSampica
jimSampica

Reputation: 12410

If you generated your project from a template there is this selector in Site.css. You may have removed it but you can add it back in.

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

Upvotes: 1

Related Questions