twitter-bootstrap-3 Grid System Grid options


What is Bootstrap Grid System

Bootstrap grid system provides the quick and easy way to create responsive website layouts.

Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc.

For example, you can use the .col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens.

The following table summarizes some of the key features of the new grid system

Extra small devicesPhones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all times
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12121212
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
Column orderingYes