need spacing between divs using twitter bootstrap

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 that contains all three of the sub-content-block divs, and set it to .make-column(12) too, in hopes of having spacing between each div.

As you can see in the screenshot, there is no spacing between each div, if I do not have a background color, it looks like there is some spacing, but thats more so padding than spacing.

The gutter width is set to 30px in the variables.less file.

Any clarification as to why there is no spacing between each div is appreciated.

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

    background: @box-bg-color;

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

    a:link {
        color:#fff;
        padding:5px;
        background: @block-link-hover;
    }

    a:hover {
        background: #000;
    }
}

<div class="sub-content-block">
    <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 class="sub-content-block">
    <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 class="sub-content-block">
    <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>

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