Twitter Bootstrap column padding?

Question

Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.

I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/

    <div class="row">
      <div class="col-xs-4 box">content...</div>
      <div class="col-xs-4 box">content...</div>
      <div class="col-xs-4 box">content...</div>
    </div>

    <hr>

    <div class="row">
      <div class="col-xs-4">
          <div class="box">content...</div>
       </div>
      <div class="col-xs-4">
          <div class="box">content...</div>
      </div>
      <div class="col-xs-4">
          <div class="box">content...</div>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="col-xs-4">
          <div class="box-padded">content...</div>
      </div>
      <div class="col-xs-4">
          <div class="box-padded">content...</div>
      </div>
      <div class="col-xs-4">
          <div class="box-padded">content...</div>
      </div>
    </div>

    <hr>

    <div class="row box">
      <div class="col-xs-6">
         header: logo
      </div>
      <div class="col-xs-6">
          header: ad banner
      </div>
    </div>

  </div>

The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.

Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.

On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.

This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)

Is there a correct way to get around this?

Answer 1

I typically use columns within columns to provide an effect similar to padding.

Instead of

<div class="col-xs-4">
    <div class="box">content...</div>
</div>

Try this:

<div class="col-xs-4">
    <div class="box row">
        <div class="col-xs-1"></div>
        <div class="col-xs-10">content</div>
        <div class="col-xs-1"></div>
    </div>
</div>

See the change in your second row: http://jsfiddle.net/w7zS3/3/

(I modified the background color to red to make it easier to see the difference between the background and the boxes)