Bootstrap: How do I align the button correctly? - css

Question

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 1

I personally wouldn't add the margin-top, if you can avoid it. Purely down to the fact that when you look at it on a different device you will probably need to remove said margin.
I would add an "empty" form label above the button:
<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" style="display: block;"> </label>
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>

Answer 2

Flexbox, I find myself coming back to how good it is over and over again.
So what we want if for the button to move down so it's against the bottom of the block, not the top. We could move it a number of ways, but they all rely on you getting the number of pixels or percent right, and that seems like a lot of effort.
Here's the flexbox 'lazy' solution
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
padding-top: 50px;
}
.form-group {
display: flex;
}
.form-group .flex-down {
align-self: flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<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 flex-down">
<button type="button" class="btn btn-primary">Manage customers...</button>
</div>
</div>
</form>
</div>
Hope you find this helpful.
I added this to the CSS
.form-group {
display: flex;
}
.form-group .flex-down {
align-self: flex-end;
}
and the class flex-down to the div containing the button.

Answer 3

try this.
add one label tag above the button with space (no content)
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"> </label>
<button type="button" class="btn btn-primary form-control">Manage customers...</button>
</div>
</div>
</form>
</div>

Answer 4

do this as said by #Andrew,
button{
margin-top:25px;
}

Answer 5

Add 25px top margin to your button .
.btn-primary {
margin-top: 25px;
}

Answer 6

You can translate the Y position using transform: translateY(75%);. Updated Fiddle
Add below code to your CSS:
button {
transform: translateY(75%);
}

Answer 7

I wouldn't change the button margin as it will affect every button.
How about adding an invisible label and the button take all the space of the column? I think it looks nicer on devices too.
See example bellow:
http://jsfiddle.net/Dhanck/fpurv0L9/7/
<div class="col-sm-3">
<label style="visibility:hidden">das</label>
<button type="button" class="btn btn-primary btn-group-justified">Manage customers...</button>
</div>