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

Question

I came across this line in the Bootstrap documentation at this url: http://getbootstrap.com/css/#grid-intro

It says:

• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
• The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.

The first one makes sense. However, I don't get the second one. If you look at the page, the grid examples are indeed outdented but that does not align the grid to the rest of the content. It just keeps it... um... outdented. :-)

Can someone explain to me what they are trying to say here?

Thank you!

Answer 1

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

Answer 2

The col-* properties add 15px padding to the element while the row element applies a -15px horizontal margin, which means it will outdent that evens it out.

Both are needed so it makes it fluid and aligned.

As per the example it looks like there is no row element wrapping them. How it works and how they have used it on the bootstrap website aren't correlated. I wouldn't just go by the examples in the docs. Try for your self and get an idea.