Adding a simple spacer to twitter bootstrap

Question

I'm using twitter-bootstrap, with LESS and Rails.

I want to add a simple spacer to my CSS that appears between the grid rows to space things out a bit better. I couldn't find anything in the bootstrap that does it for me so I figured I could just add a spacer div with a margin-top defined.

I took the following code in my bootstrap override file:

 .spacer {  margin-top: 40px; } 

but all the margins seem to bunch together at the top of the page and not between the grid. I'm sure its a position attribute I'm missing somewhere please help.

I'm open to any other suggestions on a better way to achieve this, or if t-bootstrap has anything already that I have missed.

Thanks!

Answer 1

You can add a class to each of your .row divs to add some space in between them like so:

.spacer {     margin-top: 40px; /* define margin as you see fit */ } 

You can then use it like so:

<div class="row spacer">    <div class="span4">...</div>    <div class="span4">...</div>    <div class="span4">...</div> </div>  <div class="row spacer">    <div class="span4">...</div>    <div class="span4">...</div>    <div class="span4">...</div> </div>