Bootstrap 3 and .col-xs-* -- Do you not need rows of 12 units?

Question

I'm a little confused by the Bootstrap 3 documentation and thus usage of the .col-xs-* classes.

The docs for Grid Options say that all of the grid systems use 12 columns.

If you take a look at Bootstrap 3's docs for an Example Mobile and Desktop layout they show the first row's .col-xs-* classes totaling 18 column units.

What gives? How can this be? Are the docs wrong?

Thank you

Answer 1

Bootstrap is a 12 column rid, but you can put more than 12 columns in a row. The remaining columns will simply wrap onto the next line below, depending on the viewport.

In this example, on "md" viewports (≥992px), the contents would span 12 columns total (8 + 4). But on "xs" (<768px) the content would span 18 columns, there would be one full row (12 columns) and then below it a half-row (6 columns).

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

md...

|    8   |  4 |

xs...

|     12     |
|   6  |  

EDIT: Make sure to check out the Responsive Column Reset section of the documentation if you run into any issues with columns not wrapping correctly.