Page Navigation:

Grid


Equal width

Grid with auto-layout and equal width

.col
.col
.col
.col
.col

One column width

Grid with auto-layout around one column with set width

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

Variable width content

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

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

Responsive classes

All breakpoints

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

Row columns

Auto

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