Extra small devices Phones (<0px) | Small devices Tablets (≥576px) | Medium devices Desktops (≥768px) | Large devices Desktops (≥992px) | Extra Large devices Desktops (≥1200px) | |
---|---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
Max container | None (auto) | 576px | 768px | 992px | 1200px |
Class prefix |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
Number of columns | 12 | ||||
Max column width | Auto | 60px | 78px | 95px | 95px |
Gutter width | 1.5rem (0.75rem on each side of a column) | ||||
Nestable | Yes | ||||
Offsets | N/A | Yes | Yes | ||
Column ordering | N/A | Yes | Yes |
xs
to xl
.
col-{breakpoint}-auto
classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
.w-100
where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100
with some responsive display utilities.
.col
and .col-*
classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col
.
.col-sm-*
classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.
.no-gutters
. This removes the negative margins from .row
and the horizontal padding from all immediate children columns.
.clearfix
and responsive utility classes.
.offset-md-*
classes. These classes increase the left margin of a column by *
columns. For example, .offset-md-4
moves .col-md-4
over four columns.
.push-md-*
and .pull-md-*
modifier classes.
.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).