/

Grid


Equal widthH5Br,Grid with auto-layout and equal width

.col
.col
.col
.col
.col

One column widthH5Br,Grid with auto-layout around one column with set width

.col
.col-7
.col
.col-3
.col
.col

Variable width contentH5Br,Grid with auto-layout around columns with set width and natural (auto) width

.col
.col-auto
.col
.col
.col-auto
.col-2

All breakpointsH5Br,Same grid across all devices: use .col and .col-*

.col
.col
.col
.col
.col-6
.col-3
.col-3

Responsive

Advanced grid changing layout across different device sizes: use device prefixes

.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-6 .col-lg-3
.col-6 .col-lg-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

ResponsiveH5Br,Advanced grid changing layout across different device sizes: use device prefixes

.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-6 .col-lg-3
.col-6 .col-lg-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Row columns

Column
Column
Column
Column

2

Column
Column
Column
Column

3

Column
Column
Column
Column

4

Column
Column
Column
Column

Responsive

Advanced grid changing layout across different device sizes: use device prefixes

Column
Column
Column
Column

Nesting

.col-md-12 .col-lg-6
.col-md-12 .col-lg-3
.col-md-12 .col-lg-3
.col-md-4