Grid

Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

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.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

.col-md-12

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.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Example: Mobile, tablet, desktop

Build on the previous example by creating even more dynamic and powerful layouts with tablet col-sm-*classes.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4