Bootstrap Negative Margin on Rows

Bootstrap negative margin on rows

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?

Why negative margin in .row?

Because you're supposed to use them in combination with columns.

Columns generally have a padding to push the contents of them away from the border, in order to make it look nicer. However, when you are nesting columns within columns, the content keeps getting pushed inwards, which is mostly not a desired effect. To keep this from happening the rows have a negative margin, which pulls the columns back. In your case, it looks like you need to add a col-xs-12 around the column groups within the rows . This will prevent the content from being pulled too far.

Take a look here for a nicely explained introduction.

Here's a demonstration of how the .row class works:

.col1 {

  background: red;

}

.col2 {

  background: green;

}

body {

  font-family: sans-serif;

}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">

<div class="row">

  <div class="col-xs-12

                col1">

    <div class="col-xs-12

                col2">

      <div class="box">Without a row</div>

    </div>

  </div>

</div>

<br>

<div class="row">

  <div class="col-xs-12

                col1">

    <div class="row">

      <div class="col-xs-12

                col2">

        <div class="box">With a row</div>

      </div>

    </div>

  </div>

</div>

How to Add Negative Margin Using Bootstrap on Desktop Only

The is no mb-n15 class. There are negative margins classes for 0 - 5 units that can be set responsively.

So for example, if you want to set a margin of negative 5 spacing units on md and larger, and no negative margin on xs/sm (mobile) it would be:

     <div class="m-md-n5 m-0">
           <img src="//placehold.it/800x500" class="img-fluid">
     </div>

https://codeply.com/p/bRAStkuS0U

How does negative margin work in bootstrap carousel?

Question 1:

The margin-right actually is placing the slides on top of one another - it's the CSS transform that fixes this and makes the slides appear next to each other. Take a look at this example where the slides are forced to display: block and you'll see the third slide, with the other two stacked beneath.

The real reason for using margin-right: -100% is to make sure the slides appear in a row, rather than stacking vertically. See this example where the slides are visible and the negative margins removed - you can scroll down to see all the slides are stacked vertically.

Question 2:

So why does the slide on the right also get transformed? This one is a little tricky to debug, but what I think is happening is bootstrap is adding two classes to the right slide: carousel-item-next and carousel-item-left

If you look at the source CSS, carousel-item-next adds a transform: translateX(100%) to the element. But that CSS rule only includes the transform if the second class is not present:

.carousel-item-next:not(.carousel-item-left),
  transform: translateX(100%);
}

So what I believe is happening is that bootstrap is adding the first class (carousel-item-next), then there is a slight delay before the second class (carousel-item-left) is added.

That delay means the right slide is briefly given a transform of translateX(100%) which is then immediately removed. Because there is a transition on the slide elements, this causes the right slide to animate from translateX(100%) to translateX(0), or from right to left.

Here is a simplified example replicating this behaviour without bootstrap - click on the Move button to trigger the movement. Note the setTimeout used to artificially simulating a gap between the adding of the first and second CSS classes:

const button = document.getElementById('move');

button.addEventListener('click', () => {
  const childElements = document.querySelectorAll('.child');

  childElements[0].classList.toggle('left');
  childElements[1].classList.toggle('right');

  setTimeout(() => {
    childElements[1].classList.toggle('skip');
  }, 0);
});

#move {
  position: absolute;
  top: 10px;
  left: 55%;
}

.container {
  position: relative;
  width: 50%;
}

.child {
  display: none;
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px dotted blue;
  float: left;
  margin-right: -100%;
  transition: 1s transform ease;
}

.left {
  transform: translateX(-100%);
}

.right:not(.skip) {
  transform: translateX(100%);
}

.active,
.right {
  display: block;
}

<div class="container">
  <div class="child active">1</div>
  <div class="child">2</div>
</div>

<button id="move">Move</button>

why bootstrap's container class has padding while row class has negative margins to compensate the padding

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>

Bootstrap row class contains margin-left and margin-right which creates problems

The .row is meant to be used inside a container. Since the container has padding to adjust the negative margin in the .row, grid columns used inside the .row can then adjust to the full width of the container. See the Bootstrap docs.

Here's an example to illustrate

So, a better solution may for you to place your .row inside a .container or .container-fluid

Bootstrap's .row margin-left: -15px - why is it outdented (from the docs)

You need to look at the content within the columns, that is what is aligned with the rest of the content on page, because that is what is actually visible when using columns in a real site.

In the docs example, styles (border and background-color) are applied to the columns just to show you how they work, in the real-wold you would not apply styles to the columns themselves and thus all the content on the page would align correctly.

Look what happens when I turn off the custom styles on the columns...

---

Related Topics