Pellentesque cursus elit sed mauris vestibulum congue. Proin blandit sagittis convallis.
New Bootstrap v3.0 grid system includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.
More about new Twitter Bootstrap grid system read here.
Example: Stacked-to-horizontal
Using a single set of .col-md-*
grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.
Example: Mobile and desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-*
.col-md-*
to your columns. See the example below for a better idea of how it all works.
Example: Mobile, tablet, desktops
Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-*
classes.
More examples here.