Welcome to Shaun Luttin's public notebook. It contains rough, practical notes. The guiding idea is that, despite what marketing tells us, there are no experts at anything. Sharing our half-baked ideas helps everyone. We're all just muddling thru. Find out more about our work at bigfont.ca.

Can anything go outside a column?

Tags: bootstrap, bootstrap-3

The Bootstrap Grid system section says:

Content should be placed within columns, and only columns may be immediate children of rows.

See http://getbootstrap.com/css/#grid

The Bootstrap docs don't always follow its own rule:

Case in point, the div.bs-docs-header has a child div.container, which directly contains content.

image

I think what the docs really mean is the second part of the quote: "only columns may be immediate children of rows." I would feel comfortable placing content:

  1. outside a .container
  2. between a .container and a .row
  3. inside a .col-
  4. between a .col- and a child .row

In other words:

.container
   Content
      .row
         No Content
            .col-
                Content
                    .row
                        No Content
                            .col-

Am I off base here? Let me know on Twitter @dicshaunary.