marlar marlar - 5 months ago 8
CSS Question

Bootstrap: How do I align the button correctly?

The button in the jsFiddle below is vertical aligned with the labels. That doesn't look good and I would like it to align with the select box instead.

How do I do that?

jsFiddle

<div class="container">
<form id="bookingForm" class="form-horizontal" method="post">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label">Sender</label>
<select class="form-control">
<option>Choose a sender</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Receiver</label>
<select class="form-control">
<option>Choose a receiver</option>
</select>
</div>
<div class="col-sm-3">
<label class="control-label">Delivery</label>
<select class="form-control">
<option>Choose a delivery address</option>
</select>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>

Answer

try this.

  1. add one label tag above the button with space (no content)
  2. inside button use the class form-control.

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
  padding-top: 50px;
}
<div class="container">
  <form id="bookingForm" class="form-horizontal" method="post">
    <div class="form-group">
          <div class="col-sm-3">
        <label class="control-label">Sender</label>
        <select class="form-control">
          <option>Choose a sender</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Receiver</label>
        <select class="form-control">
          <option>Choose a receiver</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">Delivery</label>
        <select class="form-control">
          <option>Choose a delivery address</option>
        </select>
      </div>
      <div class="col-sm-3">
        <label class="control-label">&nbsp;</label>
        <button  type="button" class="btn btn-primary form-control"">Manage customers...</button>
      </div>      
    </div>
    </form>
</div>