CODEWITHSUNDEEP
csstwitter-bootstrap
Yi Jiang
Yi Jiang

Reputation: 50165

Bootstrap horizontal form has additional margins

The button that's next to a column containing a select element appears to have some extra margins on it. On my actual site it seems to be extra positive margin, while on CodePen it appears to be negative.

I suspect they are the same problem though with the markup though. Here's the CodePen demo: http://codepen.io/anon/pen/gabZMo?editors=100 

<div class="row">
  <div class="form-horizontal col-md-6">
    <div class="form-group">
      <div class="col-sm-8">
        <select class="form-control">...</select>
      </div>
      <button class="btn btn-default col-sm-4">New Event</button>
    </div>
    <button class="btn btn-primary btn-block">Free Quote</button>
  </div>
</div>

I've looked through the Bootstrap docs and this should be the correct markup. I've also tried wrapping the button in its own column, but that didn't change anything.

Upvotes: 1

Views: 549

Answers (2)

Shehary
Shehary

Reputation: 9992

You have 3 options to resolve the problem,

Put the <button class="btn btn-primary btn-block">Free Quote</button> inside <div class="form-group"></div>

Reason the button is pushing left of right because col-sm-4 selector has left and right padding 15px which is getting overwritten by btn-default selector padding: 6px 12px;

So add custom selector custom-margin and define custom CSS

1 HTML

<div class="row">
    <div class="form-horizontal col-md-6">
        <div class="form-group">
            <div class="col-sm-8">
                <select class="form-control">...</select>
            </div>
            <button class="btn btn-default col-sm-4 custom-margin">New Event</button>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block">Free Quote</button>
        </div>
    </div>
</div>

Fiddle 1

2 HTML

<div class="row">
    <div class="form-horizontal col-md-6">
        <div class="form-group">
            <div class="col-sm-8">
                <select class="form-control">...</select>
            </div>
            <button class="btn btn-default col-sm-4 custom-margin">New Event</button>
            <button class="btn btn-primary btn-block">Free Quote</button>
        </div>
    </div>
</div>

Fiddle 2

Or Do it right way

3 HTML

<div class="row">
    <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-8">
                    <div class="form-group">
                        <select class="form-control">...</select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <button class="btn btn-default btn-block">New Event</button>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="form-group">
                        <button class="btn btn-primary btn-block">Free Quote</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

Fiddle 3

Upvotes: 2

fredley
fredley

Reputation: 33941

You don't want to use col-sm-4 directly on the button. Put btn-block on the button and stick it in a col-sm-4 div, like so:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="form-horizontal col-md-6">
    <div class="form-group">
      <div class="col-xs-8">
        <select class="form-control">
          <option value="1">Test Event</option>
          <option value="7">Test Event 2: The Re-testening</option>
        </select>
      </div>
      <div class="col-xs-4">
        <button class="btn btn-default btn-block">New Event</button>
      </div>
    </div>
    <button class="btn btn-primary btn-block">Free Quote</button>
  </div>
</div>

Upvotes: 1

Related Questions