Columns
Vertical alignment
Row
Grid with vertical alignment on .row using flex utilities
.col
.col
.col
.col
.col
.col
.col
.col
.col
Column
Grid with vertical alignment on .col using flex utilities
.col .align-self-start
.col .align-self-center
.col .align-self-end
Horizontal alignment
Grid with horizontal alignment on .row using flex utilities
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3
Column wrapping
.col-8
.col-5
.col-4
Column breaks
All breakpoints
Grid with column break using sizing utility class
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
Responsive
Grid with responsive column break using sizing and display utility classes
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
Reordering
Grid reordering with flex utilities: order-first (-1), order-0 to order-5 and order-last (6)
First, but last
Second, but number 5
Third, but number 4
Fourth, but number 3
Fifth, but first
Last, but unordered, so number 2
Offsetting
Offset classes
.col-md-5
.col-md-5 .offset-md-2
.col-lg-4 .offset-lg-3
.col-lg-2 .offset-lg-3
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Spacing utilities
.col-md-5
.col-md-5 .ms-auto
.col-lg-4 .ms-lg-auto
.col-lg-2 .ms-lg-auto
.col-sm-6 .me-lg-auto
.col-sm-3
Standalone column classes
8.333333%
16.666667%
25%
33.333333%
41.666667%
50%
58.333333%
66.666667%
75%
83.333333%
91.666667%
100%