StreetCoder StreetCoder - 1 year ago 84
CSS Question

What is the difference among col-lg-*, col-md-* and col-sm-* in twitter bootstrap3?

What is the difference among

in Twitter Bootstrap 3?


The Bootstrap 3 grid comes in 4 sizes (or "breakpoints").

Extra small (for smartphones .col-xs-*), small (for tablets .col-sm-*), medium (for laptops .col-md-*) and large (for laptops/desktops .col-lg-*). These grid sizes enable you to control grid behavior on different devices, i.e. desktop, laptops, tablet, smartphone, etc.


col-sm-3 is 3 grid columns wide (25%) on a typical small device width (more than 768 pixels)

col-md-3 is 3 grid columns wide (25%) on a typical medium device width (more than 992 pixels)


Combine the classes to use change column widths on different grid sizes..

<div class="col-md-3 col-sm-6">..</div>

The sm, md and lg grids will all "stack" vertically on screens/viewports 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.

Resize your browser using this demo and you'll see the grid scaling effects.

Update for Bootstrap 4 there is a new XL size, see this demo

Also, read this article that explains more about the Bootstrap grid