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.