Bootstrap 5 Grid System
Grid systems enable you to create advanced layouts using rows and columns. The Bootstrap grid system can have up to 12 columns, and you can specify how these columns scale for different viewport sizes.
Here's an example of a Bootstrap grid:
Click on the Preview button (top right of the code/preview box) to see how it looks in a larger viewport.
On smaller viewports, each grid cell will be stacked on top of each other. On larger viewports, the full grid comes into effect as intended.
The numbers at the end of each class name represent the number of columns that the column spans. So .col-sm-1 spans one column and .col-sm-8 spans eight. The sm means that the colspan applies to small devices and everything above.
Grid Sizes
The six default grid tiers are as follows:
| Breakpoint | Size |
|---|---|
xs | Extra Small |
sm | Small |
md | Medium |
lg | Large |
xl | Extra Large |
xxl | Extra Extra Large |
The following table shows how different grid options work with different viewport sizes.
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | Extra Extra large ≥1200px | |
|---|---|---|---|---|---|---|
| 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- |
| Number of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters? | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Another Example
The following example uses the same markup as the first example, but this time we use md for "medium".
Depending on your viewport size, this example might not look any different to the previous one. However, if you resize your browser down, the cells will eventually shift into the stacked position (and the previous example will remain intact).