6

According to Bootstrap's documentation

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)

and

Use rows to create horizontal groups of columns.

Why is this necessary?

A .row can only occupy the maximum width of either .container or .container-fluid

Given that you have to close the .row it seems longer to write:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Column A</h1>
        </div>
        <div class="col-md-6">
            <h1>Column B</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h1>Column C</h1>
        </div>
        <div class="col-md-6">
            <h1>Column D</h1>
        </div>
    </div>
</div>

Than this:

<div class="container">
    <div class="col-md-6">
        <h1>Column A</h1>
    </div>
    <div class="col-md-6">
        <h1>Column B</h1>
    </div>
 </div>

<div class="container">
    <div class="col-md-6">
        <h1>Column C</h1>
    </div>
    <div class="col-md-6">
        <h1>Column D</h1>
    </div>
</div>
Mistalis
  • 17,793
  • 13
  • 73
  • 97
Andy
  • 5,142
  • 11
  • 58
  • 131
  • a `.container `can contain more than one `row`. for example you want to have a `row` with 3 `col`s and one with 5 `col`s. each group of `col`s you wrap them inside a `row`and then the `row`s inside the `container`. it's about separating items and having a tidy structure. – Mihai T Oct 10 '16 at 14:41

2 Answers2

16

Container

The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change. Note that there is a 15px margin on each side, canceled by rows.

Rows

Rows should always be in a container.

The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.

Rows also have a 15px negative margin on each side. The div that makes up the row would normally be constrained inside of the container's padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.

Columns

The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.

For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.

Mistalis
  • 17,793
  • 13
  • 73
  • 97
  • And while the container has full width, rows usually have `max-width` specified. Than rows also clear floatings inside and there are many other things you can think about, as background images, further positioning of elements inside, etc. Not necessary, maybe not required, but planned and recommended in framework. – skobaljic Oct 10 '16 at 14:44
  • @Mistalis thanks for the detailed explanation. The link to the article you provided is excellent. I recommend anyone reads that article if they have this same question. Diagrams on there are very useful. – Andy Oct 10 '16 at 15:06
  • Nice answer, except the "ideally having columns that add up to 12" is a little misleading since [Bootstrap has column wrapping](http://stackoverflow.com/documentation/twitter-bootstrap/6124/using-clearfix-in-rows-and-cols/28651/why-would-bootstrap-columns-exceed-12-in-a-row#t=201703131854450377148). – Carol Skelly Mar 13 '17 at 18:55
3

The .row elements have a negative margin on both sides. All the columns have a padding taking care of the spacing, even the first and the last one (which is something we don't want) so the .row pulls them back to fix that. Also, I think it makes more sense to have more rows in a container, instead of columns.

Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40