Bootstrap rows has a margin
(left and right) of -15px
.
As far as I know this is mainly by two reasons:
.container
has a padding
(left and right) of 15px
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
.
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?