need spacing between divs using twitter bootstrap v3

Question

Using twitter bootstrap v3 rc1.

I have three .sub-content-block divs on my page, with .make-column(4); applied to each.

I have tried adding .make-row; to a div t

Answer 1

In the first place i wonder why you use v3 rc1 and not the latest release. Version 3.0.0. don't define .make-column any more. Instead you have to use .make-xs-column, .make-sm.column, etc. depending om the grid you will use.

I have used Version 3.0.0. to answer your question, but the answer will be the same.

In Bootstrap 3 the gutter is construct by adding a padding to the column. In the default case with a gutter of 30px a padding of 15px is add to the left and right of a columns. You add a background to the column, this background also will fill the padding space, so you don't see the gutter. (you still see white space around your content).

To make the gutter visible you will have to wrap your content in an extra container (div) and apply a background on this.

Less

.sub-content-block {
    .make-md-column(4);

    background: red;

    a {
        color: #fff;
        text-decoration: none;
    }

    a:link {
        color:#fff;
        padding:5px;
        background: green;
    }

    a:hover {
        background: #000;
    }
    .inside {
    background-color: white;
    }
}

NOTE i will wrap my content in a div with class inside. I also use: make-md-column where you will use make-columns maybe.

html:

<div class="container">    
 <div class="sub-content-block">
    <div class="inside">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
    </div>
</div>
<div class="sub-content-block">
    <div class="inside">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
    </div>
</div>
<div class="sub-content-block">
    <div class="inside">
    <h4>Get Fast Quote</h4>
    <p>Get a fast quote, or schedule an on-site estimate.</p>
    <p><a href="">Learn More</a></p>
    </div>
</div>
</div>

result