Negative Left and Right Margin of .Row Class in Bootstrap

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?

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

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>

Why does the bootstrap .row class have a default margin-left of -30px?

question 1:

the spans all have a margin-left of 30px to create some space between the single blocks. this space should only appear between the single spans and not at the beginning (or end) of the row. to accomplish this, there are several possibilitys - for example:

• create a negative margin with the space-with on the row (this is what bootstrap does)
• use the :first-child selector to remove margin-left on the first span in a row
• [to be continued]

i can only assume the bootstrap uses the first option because it's more compatible with older browsers (most likely IE 7 and below).

a little example: lets say your spans have a width of 100, a space of 10 and there are 3 in a row.

• your total row-width in this case should be 320 (100 + 10 + 100 + 10 + 100 = 320)
• a single span has a width of 110 (100 width + 10 magin-left)
  
  
  • simply adding those up would give you a width of 330 and an ugly space of 10 at the beginning (10 + 100 + 10 + 100 + 10 + 100 = 330)
  • "subtract" 10 with one of the listed methods (-10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
    
    
    • hooray, we've created great things with the power of math

question 2
if you use span4s, you already have 3 columns of the same width. you don't need to change anything.

How to remove margin-left and margin-right of col class in bootstrap?

As Yorki Bonilla said you can do something like this:

<div class="container">
<div class="row no-marginLR">
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
    </div>
    <div class="col-sm-6 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
    </div>
    <div class="col-sm-3 no-padding">
        <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
    </div>
</div>

And add a class in your CSS

.no-padding {
    padding: 0px;
}

But at the same time you have to remember to remove the left and right margin to the row that contains your columns by doing:

.no-marginLR {
    margin-left:0;
    margin-right:0;
}

Note that I've added the .no-marginLR class to the row

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...

Why does bootstrap row has a margin of -15?

By design, there is a 15px space between 2 columns in bootstrap. And when implementing it, bootstrap's creator uses CSS properties called padding-left and padding-right to set the left and right padding of the column so that the requirement could be full-filled.

Reference: access this link and search for Gutter Width

But there is a problem. The first column only needs padding-right and the last column only needs padding-left.

To solve that problem, bootstrap's creator comes up with a solution in which they sets the left and right margin of the row to be -15px (negative padding is not supported in CSS).

I usually create another CSS class that adjust the padding / margin then append it after the row class.

Bootstrap - Why: Row remove margin-left & not Row-fluid

That's hard to explain, your answer is in bold, the rest is context.

What's the logic when in static layout?

The span elements have margin-left: 20px to stay separated from other spans.

The row element has margin-left: -20px to ensure that the first span -or any span placed at the "left column"- is placed at the begining of the container.

It works because the static row has not set its width, so that margin-left: -20px does not substract width to the element, that continues filling its ancestor.

What happens in a fluid layout?

We could try the same logic, but the difference is that the width and margin-left of span elements is defined in percents, so if we increase the actual width of the row element (by applying a negative margin), these span elements also increase its size, so they don't fit within the container.

So fluid layout uses a different technique for achieving a similar result, just applies a margin-left: 0 to the :first-child.

Digging deeper

And why not use the same strategy in both layouts? Sure, that will simplify the implementation, but the static technique (that is not applicable to fluid) is more powerful. That's because any element that falls in the "left column", being :first-child or not, will became "margin-corrected". Static layouts need that kind of behaviour to comfortably providing responsiveness, fluid layouts can -more or less- manage without it.

---

Related Topics