Do rows need an immediate parent in Bootstrap?

Question

The Bootstrap 3 docs say:

Rows must be placed within a .container for proper alignment and padding.

Does this mean that one of their ancestors should be a container or that their immediate parent should be a container?

Having looked at the examples, I think the former interpretation is correct as containers have fixed widths for specific display sizes:

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
  ...
}

And as such they cannot be placed inside other components (e.g. .panel-bodys).

In other words, is the following correct markup in Bootstrap 3?

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-6">
                Col 1
            </div>
            <div class="col-xs-6">
                Col 2
            </div>
        </div>
    </div>
</div>  

Answer 1

It means that one of their ancestors should be a .container.

And your code is correct, as the docs mention:

Note that, due to padding and fixed widths, containers are not nestable by default.

Some info on why rows need to be inside .container.

Rows have margin-left: -15px; margin-right: -15px. That's because rows should only contain columns, e.g. col-md-12, and those columns have padding-left: 15px; padding-right: 15px. So that negative margin on the row will mean that effectively columns will line up 'flush' with the edges of the grid.

Because of that negative margin, you need to have the .container because it has padding-left: 15px; padding-right: 15px;. Without that, your rows would go off the page.

Full width designs

Of course, if you do wrap everything in .container then you'll have a fixed width which is not right for everyone. So, if you don't want that, you can go against Bootstrap's rules and place your rows inside a parent that has padding: 0 15px to offset the negative margin on rows (the would cause container to go off the screen and cause a scrollbar).

This demo shows both situations described above.

Answer 2

The .container class is responsible for the padding and margins of its children. Hence, whatever content you put inside the containers inherhits those properties unless overridden. There's nothing unusual going on here.

Take a look at the source for further information:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}