css - Bootstrap negative margin on rows

Question

Bootstrap rows has a margin (left and right) of -15px.

As far as I know this is mainly by two reasons:

1. The .container has a padding (left and right) of 15px
2. The col-* have a gutter of 15px.

So in order to avoid the blank space created by the gutter on the first column (on its left side) and the space created by the gutter on the last column (on its right side) the row has a margin (left and right) of -15px.

I'm just wondering, why not to remove the padding of the container and just set the padding/margin of a row to 0?

It will produce the same effect, the first column will have 15px of distance to the .container, and the same for the last column.

What I'm missing?

I've checked: Negative left and right margin of .row class in Bootstrap and Bootstrap's .row margin-left: -15px - why is it outdented (from the docs) but I don't see any reason to use negative margins instead of 0 padding.

Answer 1

It's because the containers are meant to be used to contain any content, not just the grid rows and columns. Without padding on the container, content is forced up against the edge of the layout and doesn't align with the other content...

<div class="container px-0">
  <p>This content is aligned with the outer left edge and doesn't align with grid content.</p>
  <div class="row m-0">
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
          grid content
      </div>
      <div class="col-sm-4">
         grid content
      </div>
  </div>
</div>

https://codeply.com/go/23PqWB19ol

You can see several examples of container used for other than grid content the Bootstrap examples

Negative margins also work better for Responsive Design. Many people ask "why not just adjust the padding on the first and last columns?". This demo shows why

---

Related: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?