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.

Answer 2

Think of the grid layout more in terms of a different grid for every size, lg, md, sm, and xs (or break points to be specific) that use the same markup. It might help to break open a few browser instances and an example of a grid layout. Follow along with this fiddle, or this markup:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-sm-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
    <div class="col-xs-12 col-sm-6 col-lg-1">.col-xs-12 .col-md-6 col-lg-1</div>
</div>

You'll need to know your viewport's width in pixels, so consider a browser plugin that makes this information readily available or open up a console and run this snippet:

Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

---

Start with a viewport > 1200 pixels:

The actual columns are decided by the col-lg-* classes because of the breakpoint. This will create a grid for that breakpoint.

Now look at the other two break points, col-sm-* and col-xs-*.

col-sm-* in affect:

col-xs-* in affect:

The break points allow you to create a completely new grid per size. So, in theory, the rows act as a "strict" new row, where as the col numbers like

<div class='col-xs-12'>col-xs-12</div>
<div class='col-xs-12'>col-xs-12</div>

can force a new row if the sum > 12. This is so that you don't have to have umpteen different markup templates for different breakpoints. They are guides.

Answer 3

The amount of rows a column occupies is the last number of the class.

So for example, these following classes:

.col-xs-12 .col-md-8  
.col-xs-6 .col-md-4

will result in a single row on the md-width displays but one and a half row on xs-width displays.
This simply means that on small displays those elements won't display side-by-side, but instead on top of each other.