Bootstrap grid margin

HTML & CSS
1

Hi all

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 in this 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>
2

The width of your boxes is 33.333%. That means that the three of them will just fill the container. Adding 10px margin to one or more of them blows things apart, making the combined width too wide for the container. The left/right borders also add to the overall width.

You could try something like this:

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.box {
margin: 0 [COLOR="#FF0000"]2%[/COLOR] 10px 0;
}
.col-xs-4 {
width: [COLOR="#FF0000"]32%[/COLOR];
}

Not sure if you are supposed to make changes like that when using Bootcrap, so there may be a better answer in that context.

3

Thanks ralph.m, Surely there must be a way to do this in Bootstrap, it’s such a common thing to do.

4

Hi,

No you shouldn’t really alter the bootstrap grid as that has knock on effects. All you need to do is to add an inner div and style that as you want and leave the grid alone and let it do its work. (You may need to add negative margins on the inner div to overcome the grids 30px gutter-width settings.)

In most cases you just add your elements inside the grig and apply your styling and margins to that inner element instead and leave the grid alone.

If you are using a framework - then use it :slight_smile:

If you do need to adjust the actual grid then add a custom class to it so that you can use that instead of the main bootstrap classes. However you must be careful because if for instance you adjusted the default gutter on that grid (15px padding left and right) then you would upset the row structure which has negative margins equal to that padding.

You can customise the version of bootstrap you download if your requirements are different to the standard and create your own guuter-width defaults. However if you are going to all that trouble then it begs the question of why using a framework to start with if you are not going to make use of its defaults which have all been carefully worked out.