Twitter bootstrap: how to add side margins?

Question

I have a page with centered Twitter Bootstrap container .

This container has a header that spans the entire width (span12) and below the header is a gallery of pictures, which is a bunch of rows with 4 cells (containing pictures) in each row.

I would like to add side margins to each row so that the first and last picture are not completely snug with container borders and pictures are spaced equally. I don't want to use offset1 for the margin because it is way too big.

Here is a link to the current mockup: http://i46.tinypic.com/21e2h4o.jpg

Answer 1

You can use the nth-child css property

nth-child(4n+1) for the left margin

nth-child(4n+4) for the right margin

http://css-tricks.com/how-nth-child-works/

Or

add a <div> in your .span12 with style="padding:0 19px"

and add inside a <div class="row-fluid">

<div class="row">
  <div class="span12">
    <div style="padding:0 19px">
      <div class="row-fluid">
        <div class="span3">3</div>
        <div class="span3">3</div>
        <div class="span3">3</div>
        <div class="span3">3</div>
      </div>
    </div>
  </div>
</div>