css - Must Bootstrap container elements include row elements?

Question

From my reading of the documentation, it seems that .container is the "parent" wrapper for the .row and the divs that contain the .spanX (where the x totals 12). However, it doesn't seem like there is a .row in their navigation example.

Also, on their documentation site, the .container is wrapped by a couple of navbar related divs.

Can anyone elaborate a bit on how the framework should work? I'm new to it.

Answer 1

The .row class is not required inside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.

All that .row really does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows.

For the .container inside of the .navbar divs, that is a separate thing that is required to make the navbar line up with the rest of the page. If you look further down in the rendered HTML, you'll see that there is another .container that is not inside any .navbar divs, and that is the one with all of the main content.

A Complete Example

<div class="container">
  <div class="row">
    <!-- These divs are inline and do NOT fill up the full 12 columns -->
    <div class="span4">...</div>
    <div class="span4">...</div>
  </div>

  <!-- This is a automatically a new line of divs -->
  <div class="row">
    <!-- This div will appear below the previous row, even though it
      would fit next to the other divs -->
    <div class="span4"></div>
  </div>

  <!-- These will appear in their own row, but may act
    unexpectedly in certain situations -->
  <div class="span4"></div>
  <div class="span4"></div>
</div>

In Short

.row defines a row of divs, like the name implies. Each one indicates a new line of divs, no matter if the above line is full or not.