/

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 AlignmentH5Br,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

ReorderingH5Br,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-52
.col-md-5 .offset-md-22
.col-lg-4 .offset-lg-32
.col-lg-2 .offset-lg-32
.col-sm-6 .col-md-5 .col-lg-62
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-02

Spacing utilities

.col-md-52
.col-md-5 .ms-auto2
.col-lg-4 .ms-lg-auto2
.col-lg-2 .ms-lg-auto2
.col-sm-6 .me-lg-auto2
.col-sm-32

Standalone column classes

8.333333%
16.666667%
25%
33.333333%
41.666667%
50%
58.333333%
66.666667%
75%
83.333333%
91.666667%
100%