Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
Extra Extra large ≥1400px |
Grid behavior |
Horizontal at all times |
Collapsed to start, horizontal above breakpoints |
Max container width |
None (auto) |
540px |
720px |
960px |
1140px |
1320px |
Class prefix |
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# of columns |
12 |
Gutter width |
30px (15px on each side of a column) |
Nestable |
Yes |
Offsets |
Yes |
Column ordering |
Yes |
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md-
class to an element will not
only affect its styling on medium devices but also on large devices if a .col-lg-
class is not present.