5

Bootstrap's container class has paddings on both side:

.container-fixed(@gutter: @grid-gutter-width) {
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

While row class has negative margins:

.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
}

So when we put html like that:

<div class="container">
  <div class="row">
    ...
  </div>
</div>

the content within the row class takes all the space from left to right side of the container offseting the padding using negaive margins. I'm wondering why this approach is used? I've also seen it being used for navbars, specifically navbar-right class has negative margin.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • It's not regardless of padding - they are equal to each other and offset each other. Not sure why it's used. – Dan Sep 08 '14 at 14:20
  • Yeah, right, offset each other. I rephrased it. However the question is why they do it? – Max Koretskyi Sep 08 '14 at 14:56
  • 1
    possible duplicate of [Bootstrap 3 - Why is row class is wider than its container?](http://stackoverflow.com/questions/18969051/bootstrap-3-why-is-row-class-is-wider-than-its-container) Also, this post explains more http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works – Dan Sep 08 '14 at 15:05
  • Thanks a lot! Let me read it and maybe I'll consider closing the question. – Max Koretskyi Sep 08 '14 at 15:24

2 Answers2

3

Putting your columns in a .row offsets the padding, which is so you can nest columns. Nesting columns is important to have control of some (most) layouts. Since columns have built in padding, if you nest them without offsetting it that padding will multiply and column content won't line up like you want. See this example:

http://www.bootply.com/ZZ4ML0yjSG

<div class="container">
  <h3>Without .row buffer</h3>
  <div class="col-md-12 bg-warning">Column 1
    <div class="col-md-12 bg-danger">
      <div class="col-md-6 bg-info">Nested column 1 without .row buffer</div>
      <div class="col-md-6 bg-success">Nested column 2 without .row buffer</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>With .row buffer</h3>
  <div class="row">
    <div class="col-md-12 bg-warning">Column 1
      <div class="row">
      <div class="col-md-12 bg-danger">
        <div class="row">
          <div class="col-md-6 bg-info">Nested column 1 with .row buffer</div>
          <div class="col-md-6 bg-success">Nested column 2 with .row buffer</div>
        </div>
      </div>
  </div>
</div>
Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
1

The .container has padding to accommodate the negative margins of the .row, and the .row has negative margins because of the col-* (columns) work. Since columns use padding to create a gutter (space between columns), the row's negative margins eliminate the effect of the padding on the outermost columns.

Without the negative margin, there would be an extra 15 px on the outer sides as you can see here..

https://codeply.com/p/1bLNZAjk8D

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks. But if I set `padding: 0;` to `container` than everything is OK. – Max Koretskyi Sep 08 '14 at 15:45
  • I guess the [article](http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works) **Dan** mentioned explains it - the padding on container and negative margin on rows are required to enable nesting of rows within columns. – Max Koretskyi Sep 08 '14 at 15:47
  • If in your example I replace `

    12 wide

    ` with `

    8 wide contains double gutter on the right

    ` I can see the double gutter on the right.     – Max Koretskyi Sep 08 '14 at 15:53