Is padding supported in the Twitter Bootstrap framework?

Question

I am having trouble understanding the Twittter Bootstrap framework. Does it allow for basic padding around containers?

There seems to be a default 20px margin left but no padding. Anyone here managed to solve this issue?

http://twitter.github.com/bootstrap/

This works fine if your background is white but the moment I place a color behind a container, I get no padding and if I add padding, my layout breaks. Am I doing something wrong?

Answer 1

Inspired by stackoverflow.com/a/10779289

.light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}

Answer 2

You can overide the sitewidth in the .less file // Grid system and page structure

i.e. if you want to add 20px to each side of the 940px (20px is the default gridGutterWidth) comment out:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

and write:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

cancel the margin-left: -20px with a css rule:

.row {margin-left: 0;}

But if you use nested rows you will need to add a class just to the rows you want to indent. Create a rule:

.indent {margin-left: 0;}

Then in <div class="row"> add in a class <div class="row indent">

Answer 3

Taking the above approach and applying it to padding would also work.

Add a class called .is-padded to the span that you want to padd (in this case span4)

<!-- Example row of columns -->
  <div class="row">
    <div class="span4 is-padded">
      <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div>

Then create CSS (or less) that reduces the width of the span by the applied padding, for example:

/* CSS example */
.span4.is-padded {
    width: 280px; /* 300 - (10x2) */
    padding: 10px;
    background: #CCC; /* just so you can see it */
}

/* Less example */
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}

This can easily be repeated for the rest of the grid

.is-padded {
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}
.span1.is-padded {
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth;
}
.span2.is-padded {
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth;
}
.span3.is-padded {
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth;
}
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
}
... etc

The break points in the responsive grids can easily be overridden also using media queries.

This approach will not work in fluid grids though.