Margins between columns - css

Question

So the new Bootstrap v3 code looks like this:
<div class="row">
<div class="col-md-4 bg-red">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-4 bg-green">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-4 bg-blue">
<h2>Heading</h2>
<p>My text here...</p>
</div>
</div>
Because Bootstrap 3 has removed column margins (now has padding left and right). How can I put a background color on the class="col-lg-4" div and have the page background gap between each div?
Note: it must be a background color on the class="col-lg-4" div.

Answer 1

One way is to use the background-clip property with the content-box value so that the painting area is clipped to the content box of .col-lg-4 instead of the border box like it is by default.

Answer 2

Use .col-*-3 and add margin to it. You have 4 columns but the 4th is unused and then you have room for the margins. Here's an example:
http://www.bootply.com/R9iSDcNuzY
HTML
<div class="row">
<div class="col-md-3 bg-danger col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-3 bg-success col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
<div class="col-md-3 bg-primary col-margin">
<h2>Heading</h2>
<p>My text here...</p>
</div>
</div>
CSS
/* CSS used here will be applied after bootstrap.css */
.col-margin{
margin: 10px;
}