CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jason C
Jason C

Reputation: 40366

Bootstrap horizontal form is ignoring container-fluid padding

In Bootstrap, container-fluid has some padding, which I want. However, things inside a horizontal form seem to be ignoring the padding and getting pushed all the way to the edges of the container (I've added a border to the container here for illustration):

<div class="container-fluid" style="max-width:900px;border:1px solid black">
  <div class="alert alert-danger">Correct, obeys container-fluid padding.</div>
  <form class="form form-horizontal">
    <div class="form-group alert alert-danger">Too Wide</div>
    <div class="form-group panel panel-default">
      <div class="panel-heading">Too Wide</div>
      <div class="panel-body">Body</div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-default">Too far left</button>
    </div>
  </form>
</div>

A working example is on Bootply.

In that example, the first alert is as intended. Everything else inside the form is too wide.

Now, not shown in the Bootply, but if I add an input to the form:

<div class="form-group">
  <label class="control-label col-sm-2" for="field">Label</label>
  <div class="col-sm-10">
    <input class="form-control" id="field" type="text"/>
  </div>
</div>

The input is padded correctly, unlike the alerts and panels, which I don't understand.

How do I get all the things in the form to obey the padding? This is especially important to me because on small screens it pushes everything right to the edge and doesn't look that great.

The only thing I could think of to try was enclosing the form in a plain div, which had no effect.

I also achieved some success by manually setting the padding on the form, but that doesn't feel right, and it also breaks the properly padded input elements. Plus, it's not too robust in that I can't guarantee my hard-coded padding will match the container's usual padding which I have no control over.

Upvotes: 1

Views: 1724

Answers (1)

williamsandonz
williamsandonz

Reputation: 16430

//This will sort out your panels and alerts. (.less code)
//Or you could just put a .col-xs-12 on them.
.form-horizontal {
  > .panel,
  > .alert {
    margin: 0 @grid-gutter-width / 2; //(or just 15px if your using bootstrap dist)
  }        
}

Then for your input groups, just using the col-sm-2 on your labels like you have done above.

And for your form group with the submit button simple put a col-xs-12 on it.

The reason for this is: .form-groups inside .form-horizontal receive margin-left: -15px; (The same as grid-gutter-width).

The intended design is that you use form-horizontal as a substitute for a .row and then use .cols inside. Or implement how you choose to fit your design.

Reference : bootstrap forms horizontal

Do your inputs like this

<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>

Do your submit button like this

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>

You can do your alerts like this if you like

<div class="col-xs-12">
 <!-- alert here -->
</div>

Upvotes: 2

Related Questions