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:

BreakpointSize
xsExtra Small
smSmall
mdMedium
lgLarge
xlExtra Large
xxlExtra 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).