| Device |
Extra small < 576px
|
Small < 576px
|
Medium < 768px
|
Large < 992px
|
Extra large < 1200px
|
| 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 |
| 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.