Grid Options
lorem ipsum dolor sit amet, consectetur adipisicing elitWhile 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 |
Stacked to Horizontal
lorem ipsum dolor sit amet, consectetur adipisicing elitUsing 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
.
Mobile And Desktop
lorem ipsum dolor sit amet, consectetur adipisicing elitDon’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.
Vertical Alignment
lorem ipsum dolor sit amet, consectetur adipisicing elitDon’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.
Offsetting Column
lorem ipsum dolor sit amet, consectetur adipisicing elitMove 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.
Push and pull
lorem ipsum dolor sit amet, consectetur adipisicing elitEasily change the order of our built-in grid columns with .push-md-*
and .pull-md-*
modifier classes.
Nesting
lorem ipsum dolor sit amet, consectetur adipisicing elitTo 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).
Flex Order
lorem ipsum dolor sit amet, consectetur adipisicing elitUse flexbox utilities for controlling the visual order of your content.