Spacing issue on bootstrap modal form - css

Question

I have created a bootstrap modal form with some fields in it the user can edit. But the footer is tight on to the last field, so there is no gap between the form and the buttons.
When i look at the footer in firebug it seems to be taking up half the modal form. I am new to css and I am out of ideas as to why this is happening
Here is the code for the form:
<a data-toggle="modal" href="#myEditModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" id="name" name="name" placeholder="Company" type="text">
</div>
</div>
<div class="form-group">
<label for="street" class="col-sm-2 control-label">Street</label>
<div class="col-sm-10">
<input class="form-control" id="street" name="street" placeholder="Street" type="text">
</div>
</div>
<div class="form-group">
<label for="number" class="col-sm-2 control-label">Number</label>
<div class="col-sm-10">
<input class="form-control" id="number" name="number" placeholder="Number" type="text">
</div>
</div>
<div class="form-group">
<label for="zipcode" class="col-sm-2 control-label">ZIP Code</label>
<div class="col-sm-10">
<input class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code" type="text">
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input class="form-control" id="city" name="city" placeholder="City" type="text">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input class="form-control" id="country" name="country" placeholder="Country" type="text">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
I have also reproduced the form on bootply
http://www.bootply.com/126859
I only want to introduce a 5px or so margin, if anyone could point out my mistake that would be great
Thanks
JaChNo

Answer 1

You're missing the form tag, and since you have your labels and inputs in columns, it looks like you also need to give the form a class of form-horizontal. Here's a link to an example of how to build a horizontal form with bootstrap: http://getbootstrap.com/css/#forms-horizontal
I updated your code, and this should work without having to add any CSS:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Company">
</div>
</div>
<div class="form-group">
<label for="street" class="col-sm-2 control-label">Street</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="street" name="street" placeholder="Street">
</div>
</div>
<div class="form-group">
<label for="number" class="col-sm-2 control-label">Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="number" name="number" placeholder="Number">
</div>
</div>
<div class="form-group">
<label for="zipcode" class="col-sm-2 control-label">ZIP Code</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code">
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" name="city" placeholder="City">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="country" name="country" placeholder="Country">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Answer 2

Simply add a margin-top:5px to your .btn class. However, if you are a picky as I am, I wouldn't modify Bootstrap, that way you can always update it when they release an update for it.
Instead map the class separatedly in a stylesheet and use the class that is already declared for you as such
.modal-footer .btn{
margin-top: 5px; /* I think 15px looks way better */
}
You may/maynot have to add a !important hack to it