twitter-bootstrap Grid system Bootstrap Grid Tiers (Breakpoints)
Example
In addition to the concept of column units, Bootstrap has different breakpoints or grid sizes known as tiers. The Bootstrap 3 grid has four (4) tiers to accomodate different screen (or viewport) widths. The Bootstrap 3 tiers are xs, sm, md, and lg. Bootstrap’s grid columns are identified by different col-{breakpoint}-{units} CSS classes.
Each grid tier encompasses a range that is designed to best-fit typical device screen widths such as that of desktops, laptops, tablets and smartphones.
Bootstrap uses CSS media queries to create responsive breakpoints that establish a boundary for each grid size. These grid sizes enable you to change the layout of columns to best match different screen widths and devices__ the essence of responsive design.
col-xs-*— for the smallest screen widths like smartphones < 768 pxcol-sm-*— for small screen widths like smartphones and tablets >= 768 pxcol-md-*— for medium screen widths like tablets and laptops >= 992 pxcol-lg-*— for large screen widths like desktops >= 1200 px
Reference: Grid System
Same column width for each device
To create a column that is always 50% of the viewport width (on all devices) you could set col-*-6 for every tier..
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>
However, this is unecessary extra markup, since col-xs-6 means 6 units on xs and up. The smallest tier you set (xs, sm or md) also defines the size for larger screen widths. For the same size column on all tiers, just set the width for the smallest viewport.
Shorter code:
<div class="col-xs-6">..</div>
Different column width for each device (responsive design)
The col-*-* classes can be combined to control the column widths on different grid sizes..
For example, create a 50% width column at the sm tier, and a 25% width column at the md tier...
<div class="col-md-3 col-sm-6">..</div>
The sm, md and lg grids will all "stack" vertically at viewport widths less than 768 pixels. This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically and continue to scale down on the smallest screens.
