Grid system

Five grid tiers

.col-4

.col-4

.col-4

.col-sm-4

.col-sm-4

.col-sm-4

.col-md-4

.col-md-4

.col-md-4

.col-lg-4

.col-lg-4

.col-lg-4

.col-xl-4

.col-xl-4

.col-xl-4

Three equal columns

.col-md-4

.col-md-4

.col-md-4

Two columns

.col-md-8

.col-md-4

Mixed: mobile and desktop

.col-12 .col-md-8

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-md-6

.col-6

Mixed: mobile, tablet, and desktop

.col-12 .col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6. col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

Two columns with two nested columns

.col-md-8

.col-md-6

.col-md-6

.col-md-4

Full documentation

Read the full documentation for these components.

Learn more