Bootstrap 3 Grid Examples

Convert Bootstrap 2.x to 3.0

.col-lg-* works just like the legacy .span*

.col-lg-4

Here is some text in a "4 width" grid column. In Bootstrap 2.x we would have called this span4, but now in Bootstrap 3.0 it's called col-lg-4.

.col-lg-4

Back in the old days of Bootstrap 2.x, any span* columns (DIV) would change to 100% width when viewed on a smaller width less than 992px.

.col-lg-4

Bootstrap 3 provides two grids. col-lg-* is the large grid for wider displays (desktop/laptop), and col-sm-* is the small grid for mobiles, tablets and phones.





Small

Get mobile-first with smaller widths for smaller displays

.col-sm-4

The new small "Mobile-first" grid is realized using the new Bootstrap 3 col-sm-* CSS classes. These cols stay narrow on tables and phones, until they change to 100% width when the display is less 768px wide.

.col-sm-4

The large grid CSS classes (col-lg-*) work just like the Bootstrap 2.x span* classes worked. In BS3, you must use col before col-lg-* when defining columns for your layout.

.col-sm-4

Bootstrap 3 provides two grids. col-lg-* is the large grid for wider displays (desktop/laptop), and col-sm-* is the small grid for mobiles, tablets and phones.




Tiny

.col-* never stacking for tiny widths for less than 480 pixels wide

.col-4

The new tiny grid is realized using the new Bootstrap 3 col-* CSS classes. These columns narrow responsively, never stack and don't change to 100% width.

.col-4

In BS3, there is no longer a "fixed" grid so you need to use only container and row to contain elements in the layout.

.col-4

Bootstrap 3 provides 3 grids. col-lg-* is the large grid for wider displays (desktop/laptop), and col-sm-* is the small grid for mobiles, tablets and phones. The tiny (non-stacking) grid uses col-*.




Combining the Sizes

Mix it up to create exquisite responsiveness

col-lg-6 col-sm-3
Desktop = 50% width
Tablet = 25% width
Smartphone = 100% width
col-lg-6 col-sm-3
Desktop = 50% width
Tablet = 25% width
Smartphone = 100% width
col-lg-6 col-sm-3
Desktop = 50% width
Tablet = 25% width
Smartphone = 100% width
col-lg-6 col-sm-3
Desktop = 50% width
Tablet = 25% width
Smartphone = 100% width

col-lg-6 col-3
Desktop = 50% width
Tablet/Smartphone = 25% width
col-lg-6 col-3
Desktop = 50% width
Tablet/Smartphone = 25% width
col-lg-6 col-3
Desktop = 50% width
Tablet/Smartphone = 25% width
col-lg-6 col-3
Desktop = 50% width
Tablet/Smartphone = 25% width

Bootstrap 3 Migration Guide | Upgrade Tool

Edit on Bootply. The Bootstrap Playground.