39

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.

Ignasi
  • 5,887
  • 7
  • 45
  • 81
  • 1
    Does your test case still work if you tried that with rows and columns nested over multiple levels …? – CBroe Jul 11 '18 at 10:21
  • 1
    I agree it is a very restrictive design. It forces you to use the entire scafolding hierarchy, even if you just need the row. Not sure why they have done it like that. It is probably needed for some of the components to work properly / look nicely. Bootstrap is very rigid and verbose in that sense – Dimitris Jul 11 '18 at 10:23
  • @CBroe if you respect the hierarchy: a column always is the direct child of a row I don't see why should fail. – Ignasi Jul 11 '18 at 10:30
  • 1
    Maybe http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works can help shed a bit more light on why it was necessary to go that way. – CBroe Jul 11 '18 at 10:36

4 Answers4

29

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?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
28

Here is your simple and easy answer

Go to your class where you want to give a negative margin and use this method.

Example for margin top

mt-n3

Example for margin bottom

mb-n2
Mukta
  • 1,357
  • 1
  • 15
  • 17
4

If removing the minus margin from the row than one should practice to remove the column padding becuase row minus margin is to handle the padding of the same amount in the column.

To remove minus margin recommeded way is to use no-gutters class or g-0 class as per the version of bootstrap.

Upto Bootstrap Version 4.6 Use

<div class="row no-gutters">

Bootstrap Version 5.1 Onwards Use

<div class="row g-0">
LearningIsNever EndingProcess
  • 181
  • 1
  • 5
-4

Bootstrap negative margin on rows is very easy Go to your Bootstrap class and concat 'n' with the margin number For Example

mt-2 //should change to mt-n3
Haroon Hayat
  • 43
  • 3