Adding left and right margin to elements in bootstrap row - html

Question

Im a little confused why bootstrap wont apply left and right margins to the columns, all i want is a simple row with 3 columns that have like 20px horizontal margin in between each other. If try to do that bootstrap simply clips one of the divs to the next line.
html
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 1</p></div>
</div>
</div>
css
.col-md-4 {
background-color: tomato;
margin: 20px 5px;
}

Answer 1

Left and right margins to the columns would destroy Bootstrap's grid behaviour. Don't modify Bootstrap's classes. Add your own classes instead.
In your example put an extra <div> in the column. And give it a margin.
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="spacer">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<div class="spacer">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<div class="spacer">
<p>Box 1</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="spacer">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<div class="spacer">
<p>Box 1</p>
</div>
</div>
<div class="col-md-4">
<div class="spacer">
<p>Box 1</p>
</div>
</div>
</div>
</div>
CSS
.spacer {
background-color: tomato;
margin: 20px 5px;
}
Demo

Answer 2

for a little more spacing you could do:
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>

Answer 3

Bootstrap slips one in new row because it column layout is 12 columns max.
When you have 3 divs * (4 col width + margin-right) you excess the provided 12 columns.
You can set your div a little bit thinner, i.e. 3 medium bootstrap columns, like this:
<div class="col-md-3 custom-box"><p>Box 1</p></div>
<div class="col-md-3 custom-box"><p>Box 1</p></div>
<div class="col-md-3 custom-box"><p>Box 1</p></div>
and apply your css rule like this:
.custom-box{
margin-right: 20px 5px!important;
background-color: tomato;
}
here is a FIDDLE