Bootstrap grid margin

Question

I have a jsfiddle here: http://jsfiddle.net/nH5WP/

It's a super simple 3 x 3 grid using Bootstrap 3

I want to add margins to the right and bottom of each block.

The last block in each line is dropping down, I would normally remove the right margin on the last block in each line with something like

.box:last-child{
  background: yellow;
  margin: 0 0 10px 0;
}

but this doesn't seem to work.

How can I add margins between each block in this grid ?

<div class="container">

    <div class="row">
        <div class="col-xs-4 box">
            <p>One</p>
        </div>
        <div class="col-xs-4 box">
            <p>Two</p>
        </div>
        <div class="col-xs-4 box">
            <p>Three</p>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4 box">
            <p>Four</p>
        </div>
        <div class="col-xs-4 box">
            <p>Five</p>
        </div>
        <div class="col-xs-4 box">
            <p>Six</p>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4 box">
            <p>Seven</p>
        </div>
        <div class="col-xs-4 box">
            <p>Eight</p>
        </div>
        <div class="col-xs-4 box">
            <p>Nine</p>
        </div>
    </div>

</div>

Answer 1

You can't create a "gutter" in the bootstrap grid system using margin:.

Bootstrap uses padding to build gutters, so you need to put a wrapper div around your columns and pads that.

See How to adjust gutter in Bootstrap 3 grid system? for more information.

Answer 2

Apply width:calc(33.33% - 10px); in box class.