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>

score 8 · Accepted Answer · edited May 23 '17 at 12:09

8

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.

edited May 23 '17 at 12:09

Community

1
1

answered Jun 21 '14 at 09:57

Peter Wooster

6,009
2
27
39

Updated how the above Jsfiddle would work if the Bootstrap padding based grid is applied: http://jsfiddle.net/Lzw3yyg0/ – Nicky Vandevoorde Nov 26 '16 at 14:48

score 3 · Answer 2 · edited Sep 24 '16 at 16:47

3

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

edited Sep 24 '16 at 16:47

Petter Friberg

21,252
9
60
109

answered Sep 24 '16 at 16:12

Gus

41
6

score -5 · Answer 3 · edited Jul 19 '14 at 03:09

-5

Change each:

class="col-xs-4 box"

to

class="col-xs-3 box"

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

edited Jul 19 '14 at 03:09

Dan Is Fiddling By Firelight

5,981
17
77
128

answered Jun 21 '14 at 10:00

webtroll

45
1
6

1

But then it's not full width, I need to with margins but full window – ttmt Jun 21 '14 at 10:29

Bootstrap grid margin

3 Answers3

Linked