52

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
StackOverflowNewbie
  • 39,403
  • 111
  • 277
  • 441
  • 1
    Did you see this? [bootstrap scaffolding](http://twitter.github.com/bootstrap/scaffolding.html) – noel Oct 21 '12 at 00:59
  • 3
    Yes, that is part of the cause of the confusion. – StackOverflowNewbie Oct 21 '12 at 02:38
  • I think you're confusing the purpose of each. The `.row` class is important in that it clears, so if you don't wrap your `.spanX` elements then you will have to clear manually if the design is responsive. – Paul Campbell Oct 21 '12 at 12:48
  • @PaulCampbell - I get the importance of `.spanX`. And I see how to use it in `.container`. The problem is that in their nav bar example, it does not use `.spanX`. I wish it did because I want to offset my navigation items. – StackOverflowNewbie Oct 21 '12 at 14:14
  • 2
    @StackOverflowNewbie navigation elements are not grid elements, if you want to offset them use the `.pull-left` or `.pull-right` classes. – Andres I Perez Oct 21 '12 at 15:53

3 Answers3

48

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.

Jon Egeland
  • 12,470
  • 8
  • 47
  • 62
  • 3
    So a `.container` does not need to have a `.row`, but a `.row` should be in a `.container` -- right? I guess my biggest confusion is how `.container` can be a child of another container. From my reading of the docs, it seems to be that it was means to be the top most container element, used specifically for breaking down the major parts of your layout. Then I see it used as a child of nav-related classes. – StackOverflowNewbie Oct 21 '12 at 02:47
  • 1
    At least for Bootstrap 2.3.2, one thing to note is that .row has a left-margin: -20px (for standard grid) because all spanX have left margin of 20px. Container doesn't have the weird margin, so placing spanX divs directly in the container will force them to be shifted 20px to the right outside the container's right edge. However if you follow the "suggested" hierarchy of .container > .row > .spanX's, then everything will be aligned properly inside the container parent. – Alexandra Oct 08 '13 at 02:17
  • Related question please : If I want paragraph A and then ( in new line) - paragraph B , should I set each paragraph in `.row` ? `

    ` is already block element so it will automatically will go to a new line. so my question is : when should I use `.row` in order to put a new line ?

     – Royi Namir Jan 08 '14 at 09:26
  • 1
    `.row` should only be used for separating the _structure_ of your page (i.e. groups of `span*` divs), not the content. Therefore, your paragraphs should both be inside one `.row`, and preferably inside a `span12` (full width, or whatever other size you want). – Jon Egeland Jan 09 '14 at 07:55
  • I think the following article pretty much sums up what the different classes of the Bootstrap grid system do: - http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works – Ben Feb 02 '15 at 10:49
30

The answer is much simpler than those given. No, .container does not have to contain any specific code, and it has no encumbrances on what contains it...

What .container does is serve as a "wrapper" to "contain" the size of any and all elements wrapped inside of it. And .container can wrap pages or components. So, if you want a page similar to those Twitter Bootstrap's docs, with a "fixed" width and equal margin on both sides, then only a single .container is necessary to wrap all of the content on the page.

There are other uses for .container as well; have you noticed how the top navbar in Bootstrap's docs (.navbar-fixed-top) spans the full width of the screen, but the nav items inside the navbar are "contained" to the width of the content? This is because the .navbar-fixed-top is not inside a .container but the .nav inside it is.

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
  • Do you have any useful references for this? Your answer has helped me greatly and it would be good to read more about this. The documentation for bootstrap seems not to define/explain .container at all! Very frustrating! – tentimes Jun 02 '13 at 12:34
  • I'm not sure, I don't recall seeing any but that doesn't mean there isn't any out there. Perhaps I'll do a simple gist or blog post to cover the basics for newcomers to Bootstrap. – jonschlinkert Jun 02 '13 at 15:33
1

The bootstrap grid is composed of 12 columns that can be adjusted in any combination within a row as long as they add up to 12. You can think of them as containment rows such as the likes of table rows, which are meant to separate different rows of content. Within the grid, the .row container has a separate task and is there (and required) to readjust the last grid columns gutter width, which varies depending on screen size (if the responsive sheet is included). If you look at the css behind the .row class you will notice that it has a property of margin-left:-30px by default (once again it can be greater or less depending on screen size), a property which is meant to "remove" the gutter from the last column in the row; without it the grid would not readjust the gutter and it would break onto a second line.

Now, the reason why the .row container is a child of the .container container is because the .row container is only meant to separate "lines" of content, not to contain sections and more over center content in a page. As such, the reason why the navigation example did not have one was probably due to the fact that the nav elements is lacking in gutter width, since it was meant to be a full block element and not a grid, so there was no need to reset that last loose gutter.

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • OK, that explains why nav was just in a `.container` without any `.row`. What are your thoughts on `.container` being wrapped in nav-related classes? `.container` not always the parent? – StackOverflowNewbie Oct 21 '12 at 02:41
  • @StackOverflowNewbie The `.container` class is just a container and is merely used to center and contain. The way it is used within a navigation component is still the same, just that it is being "wrapped" with the necessary styles to create the presentation of the navigation (since the `.container` class is once again only meant for content containment and not presentation), hence all the nav classes wrapping the `.container`. – Andres I Perez Oct 21 '12 at 02:49
  • When I try to do a 2 column layout using 2 spans that add up to 12, it only works in a `row` class, if I put it in a `container` class it wraps - i have to lower the total to 11 columns to prevent the wrap... – Brock Hensley May 15 '13 at 14:43
  • 1
    @dirt the `.row` container subtracts the gutter space from the `.container` container in order to fit the first `.span*` grid element. So it needs to be included for a proper 12 column grid. – Andres I Perez May 20 '13 at 14:46
  • I was trying to figure out the -30px margin that was popping up in my css, thank you! – Daniel Aug 04 '13 at 15:38