Grid
Bootstrap main grid structure remains the same.
.container
.row
.col
Breakpoints
In Bootstrap 5, xxl
is introduced as a new screen size breakpoint.
Here are the size ranges for each breakpoint in pixels:
xs: 0-575 (default because mobile first)
sm: 576-767
md: 768-991
lg: 992-1199
xl: 1200-1399
xxl: 1400+
Container
Now, there are different container sizes
.container 100%
.container-sm 540px
.container-md 720px
.container-lg 960px
.container-xl 1140px
.container-xx 1320px
.container-fluid 100%-100%
Rows
Rows remain the same row
Columns
.col (Equal width)
.col-[1-12][auto]
.col-sm-[1-12][auto]
.col-md-[1-12][auto]
.col-lg-[1-12][auto]
.col-xl-[1-12][auto]
.col-xxl-[1-12][auto]
Row Columns
Use these row columns classes on the parent .row
to quickly create basic grid layouts.
With .row-cols-auto
you can give the columns their natural width.
.container
.row row-cols-2
.col
.col
.col
You can control your card layouts and override when needed at the column level.
.container
.row row-cols-4
.col
.col-3
.col-6
Row columns are also responsive.
.container
.row row-cols-1 row-cols-sm-2 row-cols-md-4
.col
.col
.col
Gutters
Columns now have left and right paddings as well as top and bottom paddings, also known as gutters.
Gutter classes are used on rows to control the vertical and horizontal gutter widths of columns.
The default gutter for a col
inside a row
is gy-0 gx-4
.
Gutter classes are placed on rows as well as row columns.
.gx-*, .gy-*, .g-*, .g-0
horizontal gutters, vertical gutters, all gutters, and zero gutters, respectively.
Gutters are also responsive, example: row row-cols-2 row-cols-lg-5 g-2 g-lg-3
Z-Index
See the z-index order of values used in Bootstrap 5; we don’t encourage customization of these individual values; should you change one, you likely need to change them all:
dropdown: 1000;
sticky: 1020;
fixed: 1030;
modal-backdrop: 1040;
offcanvas: 1050;
modal: 1060;
popover: 1070;
tooltip: 1080;