Articles

Understanding the Bootstrap Grid

Bootstrap Grid System Tutorial Tutorials Bootstrap

Bootstrap uses a grid structure to distribute content on the web page

Bootstrap Grid System

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

Extra small devicesPhones (<768px)

Small devicesTablets (≥768px)

Medium devicesDesktops (≥992px)

Large devicesDesktops (≥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. Place grid columns in any .row.