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
Responsive 1:
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
Responsive 2:
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Responsive 3:
.col-6 .col-sm-4 .col-md-6
.col-6 .col-sm-4 .col-md-6
.col-6 .col-sm-4 .col-md-6
Responsive 4:
.col-6 .col-sm-4 .col-md-6 .col-xl-4
.col-6 .col-sm-4 .col-md-6 .col-xl-4
.col-6 .col-sm-4 .col-md-6 .col-xl-4
Responsive 5:
.col-6 .col-sm-4 .col-md-6 .col-lg-4
.col-6 .col-sm-4 .col-md-6 .col-lg-4
.col-6 .col-sm-4 .col-md-6 .col-lg-4
All Responsive 6:
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-12 .col-md-6 .col-lg-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4 .col-md-6
.col-6 .col-sm-4 .col-md-6
.col-6 .col-sm-4 .col-md-6
.col-6 .col-sm-4 .col-md-6 .col-xl-4
.col-6 .col-sm-4 .col-md-6 .col-xl-4
.col-6 .col-sm-4 .col-md-6 .col-xl-4
.col-6 .col-sm-4 .col-md-6 .col-lg-4
.col-6 .col-sm-4 .col-md-6 .col-lg-4
.col-6 .col-sm-4 .col-md-6 .col-lg-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