Do rows need an immediate parent in Bootstrap? [ANSWERED]

Do rows need an immediate parent in Bootstrap?

Asked By: h2o
Originally Asked On: 2014-01-07 03:54:39
Asked Via: stackoverflow

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>  

He received 2 answers
eventually accepting:

‘s answer to

Do rows need an immediate parent in Bootstrap?

The answer with the highest score with 5 points was:

davidpauljunior’s answer to

Do rows need an immediate parent in Bootstrap?

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.

If the selected answer did not help you out, the other answers might!

All Answers For: Do rows need an immediate parent in Bootstrap?

durrrutti’s answer to

Do rows need an immediate parent in Bootstrap?

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;
}

davidpauljunior’s answer to

Do rows need an immediate parent in Bootstrap?

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.

Of course, you should really check out the original question.

The post Do rows need an immediate parent in Bootstrap? [ANSWERED] appeared first on Tech ABC to XYZ.