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

Answer 1

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:

    
.col-xs-12 .col-sm-6 col-lg-1
    
.col-xs-12 .col-md-6 col-lg-1
    
.col-xs-12 .col-md-6 col-lg-1

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

col-xs-12
col-xs-12

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.