Bootstrap Form - Why is my submit button crowding my input? - css

Question

https://jsfiddle.net/w0bekp8q/
<form class="form" role="form" method="post" action="">
<div class="form-group">
<div class="col-md-4">
<label for="reportee_first_name" class="control-label">First Name</label>
<input type="text" class="form-control" id="reportee_first_name" name="reportee_first_name" placeholder="First Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_middle_name" class="control-label">Middle Name</label>
<input type="text" class="form-control" id="reportee_middle_name" name="reportee_middle_name" placeholder="Middle Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_last_name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="reportee_last_name" name="reportee_last_name" placeholder="Last Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_address_1" class="control-label">Address</label>
<input type="text" class="form-control" id="reportee_address_1" name="reportee_address_1" placeholder="Address" value="">
</div>
<div class="col-md-6">
<label for="reportee_address_2" class="control-label">Address 2</label>
<input type="text" class="form-control" id="reportee_address_2" name="reportee_address_2" placeholder="Address 2" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_city" class="control-label">City</label>
<input type="text" class="form-control" id="reportee_city" name="reportee_city" placeholder="City" value="">
</div>
<div class="col-md-6">
<label for="reportee_zip" class="control-label">Zip</label>
<input type="text" class="form-control" id="reportee_zip" name="reportee_zip" placeholder="Zip" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_phone" class="control-label">Phone</label>
<input type="text" class="form-control" id="reportee_phone" name="reportee_phone" placeholder="Phone" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_email" class="control-label">Email Address</label>
<input type="email" class="form-control" id="reportee_email" name="reportee_email" placeholder="Email Address" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button id="submit" name="submit" type="submit" class="btn btn-primary btn-sm">Send</button>
</div>
</div>
</form>
In my above JSFIDDLE, if you drag it out, you can see that my submit button butts up against the Email Address Input Box.
This is how it looks on my dev site -
What am I missing here that causes my submit button to not have space between it and the input?

Answer 1

just change the form class to form-horizontal:
<form class="form" role="form" method="post" action="">
to
<form class="form-horizontal" role="form" method="post" action="">
EDIT:
when you use form class all col-md-* classes you used inside form-group will get a float: left; in large screens which causes the form-group doesn't take it's children height. so it goes to top of the root element, so the margin-bottom of the form-group will not apply exactly on above of your button and instead on top of the root element. using form-horizontal prevents that behaviour.

Answer 2

I don't know why but your .form-group is losing it's height from bootstraps md view port width and large. There is a few things you can do. You can apply you margin-bottom to the inner div, with the col-md-12, instead of .form-group.
.col-md-12 {
margin-bottom: 15px;
}
You can also try using col-xs-12, instead of md. Then you have consistent styles and can add the needed margins without any #media.
<div class="form-group">
<div class="col-xs-12">
.....
</div>
</div>
Edit: Adam pointed out the redundant bootstrap classes.