Grid Options
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 | 20px (10px on each side of a column) | ||||
Nestable | Yes | ||||
Offsets | Yes | ||||
Column ordering | Yes |
Responsive utilities
Class | |
---|---|
Hidden on all | .d-none |
Hidden only on xs | .d-none .d-sm-block |
Hidden only on sm | .d-sm-none .d-md-block |
Hidden only on md | .d-md-none .d-lg-block |
Hidden only on lg | .d-lg-none .d-xl-block |
Hidden only on xl | .d-xl-none |
Visible on all | .d-block |
Visible only on xs | .d-block .d-sm-none |
Visible only on sm | .d-none .d-sm-block .d-md-none |
Visible only on md | .d-none .d-md-block .d-lg-none |
Visible only on lg | .d-none .d-lg-block .d-xl-none |
Visible only on xl | .d-none .d-xl-block |