What does this mean in Bootstrap 3 docs?

Question

In this page on the Bootstrap 3 documentation regarding the grid system (in the grid options table): http://getbootstrap.com/css/#grid-options

It says the following: Grid behaviour: Horizontal at all times, Collapsed to start, horizontal above breakpoints

Can someone please explain what this means, perhaps even with an example?

Thanks!

Answer 1

"Horizontal at all times" applies to extra small column (.col-xs):

• No matter what screen size, even with small screen (on phone for example) the columns will always be horizontal (i.e stay on the same row), as long as there is enough room in the grid (remember the 12 column grid, col-xs-6 + col-xs-6 will fit in that row; adding another column will go on underneath that first row). See example below in a ~ 900 x 768 screen size:

Code Sample:

<div class="row show-grid"> 
 <div class="col-xs-6">.col-xs-6</div> 
 <div class="col-xs-6">.col-xs-6</div>
 <div class="col-xs-3">.col-xs-3</div>
</div>

"Collapsed to start, horizontal above breakpoints" applies to small (sm), medium (md) and large (lg) column classes:

• It means that the columns will be horizontal if the screen is large enough. But if the screen is smaller than a pre-define "breakpoint" the columns becomes vertical.

You can try it on the examples in the documentation (on your link) by reducing your browser width.

Answer 2

It's the worst definition in the history!

Definition:

Collapsed to start

what they want to say is

column width 12/12

Definition:

horizontal above breakpoints

what they want to say is

when the screen reaches a certain width (breakpoint) columns become x/12 percentages according to classes used per column otherwise, remains 12/12

What they don't say is that they implement a waterfall -aka cascading- model of ccs media queries:

1. first all columns are defined as 12/12 (collapsed or mobile-first approach)
2. then, media queries follow from smaller to higher breakpoints:

is the screen small? apply rules for small screens

is the screen medium? apply rules for medium screens

is the screen large? apply rules for large screens

If in your implementation of such a grid system you don't define an upper limit in each and every query then for a large screen ALL queries will apply with the winner be the last (a waterfall model)!

Of course in such a "nonsense(?)" - of no upper limits- the next query should overwrite the rules of it's ancestor meaning endless duplicate code!

In bootstrap there is no upper limit in it's queries so writing sth like:

<div class="col-xs-6 col-sm-8"></div>
<div class="col-xs-6"></div>

we can see 2 equal columns in phones (<768) and 2 stacked columns in small (>768) devices and beyond.

But why? Because there is a class col-sm-8 for the first column but for the missing rule in the second one the waterfall model has already applied width 6/12! (follow the questions of media queries above: a small screen is certainly extra small, a medium is certainly extra small and small etc.).

On the other hand if the developer had implemented queries in both sizes (upper & lower) the column No.2 would be undefined without proper class and that means would remain 12/12 in the mobile-first approach!

Bottom line, designers have to give fewer classes in their grids when no-upper limits exist in media queries but the behavior is not that intuitive!

Answer 3

It means if you use the col-xs classes, your grid will be horizontal on all screens, while if you use the col-sm, col-md, col-lg classes, it will be horizontal on screen widths greater than 768px,992px,1170px respectively, else they will be collapsed.

As an example, look at Example: Stacked-to-horizontal on the same page and resize your browser. The grid uses the col-md class. You'll notice that the grid stays horizontal as long as the viewport width is >992px, below which it is collapsed.