0

Bootstrap gives the class "container" a padding of 15px.

Class "row" gets a padding of -15px. This practically cancels the padding which is applied upon "container".

Elements with the "col"-class get a padding of 15px.

Reason behinds this is obviously that the adding up of the paddings on the very left / very right shall be avoid.

=> Without the negative padding on "row" > "container" and "col" would add up to 30px. We would have a padding of 30px on the left and on the right.

You would have to use CSS-rules like "col:first-of-type { padding-left: 0; }" to remove the undesired padding from the first and last col-element.

What I don't understand: Why not just adding the paddings to the lowest elements (the elements with the "col"-class)?

If every "col"-element has a padding of 15px to the left and the right and "container" and "row" got both 0 padding I would have the same effect.

What's the purpose of giving "container" a positive padding and then removing it again by giving "row" a negative padding?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
ts248
  • 311
  • 1
  • 4
  • 11
  • 1
    Read this great article: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works – Carol Skelly Apr 01 '16 at 11:22
  • @Skelly I had already read these article. Read my question! It doesn't explain why padding is added to the container, removed via negative padding on the row and then add again on the col. The first two operation cancel each other from my current prospective. – ts248 Apr 01 '16 at 11:42
  • It's clearly explained in the article, and in the [answer](http://stackoverflow.com/questions/18969051/bootstrap-3-why-is-row-class-is-wider-than-its-container). The `container` `row` padding/margins are so content "touches the browser edge", and the col padding is for a gutter *between* cols. As explained, *"Rather than use some sort of .first or .last class on those cols.. they instead set the .row class to have neg. margins that match the padding of the cols."*. From a CSS performance standpoint it's better to adjust the `row` than use a specific first/last rule on all `col-*-*` classes. – Carol Skelly Apr 01 '16 at 12:04
  • @Skelly Content shouldn't touch the browser edge. Okay. Agree. But wouldn't a left / right padding on the first / last column have the same effect WITHOUT the container / row rules? That's my point. – ts248 Apr 01 '16 at 12:56
  • I using custom class in my projects, I add nomargin class to row, .nomargin{margin :0:} – Farshid Apr 01 '16 at 13:20
  • @farshid, yep that works for when you *don't* want a full screen `row` width, or nested cols to be the full width of their parent `col` container. – Carol Skelly Apr 01 '16 at 13:22
  • If you want to have full screen width, use container-fluid class – Farshid Apr 01 '16 at 13:27
  • Your main div:
    – Farshid Apr 01 '16 at 13:37
  • @ts248 Not an bootstrap-expert myself. But interesting question you'r asking there. Haven't realized that before. A padding on the left column would serve the same purpose ... – cluster1 Apr 01 '16 at 15:19
  • @farshid, yes `container-fluid` is full width but I don't think that's the question. – Carol Skelly Apr 01 '16 at 16:16
  • @ts248, st88 - It's not a simple matter of adjusting the padding on the first/last cols. Did you read the article or dup question? There are several reasons the most obvious is CSS performance. But, there are other things that break with the first/last cell padding approach. This is what happens when you set the row to 0, and adjust the cell padding instead: http://codeply.com/go/ZLV89BwRQF – Carol Skelly Apr 01 '16 at 16:20
  • @Skelly Thanks a lot. You have put a lot of effort into that. Would you like to turn it into an answer (instead of an comment)? So that I can accept it. – ts248 Apr 01 '16 at 17:25
  • @Skelly Awesome done. :) – cluster1 Apr 01 '16 at 17:51

0 Answers0