While Bootstrap uses em
s or rem
s for defining most
sizes, px
s are used
for grid breakpoints and container widths. This is because
the viewport width is in pixels and does not change with the
font
size.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
Extra small
<576px |
Small
≥576px |
Medium
≥768px |
Large
≥992px |
Extra large
≥1200px |
|
---|---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Offsets | Yes | ||||
Column ordering | Yes |
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 within any .row
.
Don’t want your columns to simply stack in smaller devices?
Use the extra small and medium device grid classes by adding
.col-xs-*
and .col-md-*
to your
columns. See the example below for a better idea of how it
all works.
Don’t want your columns to simply stack in smaller devices?
Use the extra small and medium device grid classes by adding
.col-xs-*
and .col-md-*
to your
columns. See the example below for a better idea of how it
all works.
Move columns to the right using .*-auto
classes. These
classes increase the left margin of a column by *
columns.
For example, .ml-auto
moves .col-md-4
over
four columns.
Easily change the order of our built-in grid columns with
.push-md-*
and .pull-md-*
modifier
classes.
To nest your content with the default grid, add a new .row
and set of .col-sm-*
columns
within an existing .col-sm-*
column.
Nested rows should include a set of columns that add up to
12 or fewer (it is not required that you use all 12
available columns).
Use flexbox utilities for controlling the visual order of your content.