css - 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!

question from:https://stackoverflow.com/questions/10691442/adding-a-simple-spacer-to-twitter-bootstrap

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>