Loading grid marker

Question

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

This is a super simple 3 x 3 grid using Bootstrap 3

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

The last block in each row falls, I would usually delete the right margin in the last block in each row with something like

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

but it does not work.

How to add fields 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 cannot create a gutter in the bootstrap grid using margin:

Bootstrap uses a spacer to assemble the gutters, so you need to put a div wrapper around your columns and spacers.

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

Answer 2

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

Answer 3

Change each:

 class="col-xs-4 box" 

to

 class="col-xs-3 box" 

You can see it at http://jsfiddle.net/nH5WP/8/