Bootstrap Grid Examples

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

.col-xxl-4

.col-xxl-4

.col-xxl-4

Three equal columns

.col-md-4

.col-md-4

.col-md-4

Three equal columns alternative

.row-cols-md-3

.row-cols-md-3

.row-cols-md-3

Three unequal columns

.col-md-3

.col-md-6

.col-md-3

Two columns

.col-md-8

.col-md-4

Full width, single column

Grid classes are not required for full-width elements.

Two columns with two nested columns

.col-md-8

.col-md-6

.col-md-6

.col-md-4

Mixed: mobile and desktop

.col-md-8

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6

.col-6

Mixed: mobile, tablet, and desktop

.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

Gutters

.col with .gx-4

.col with .gx-4

.col with .gx-4

.col with .gx-4

.col with .gx-4

.col with .gx-4

.col with .gy-4

.col with .gy-4

.col with .gy-4

.col with .gy-4

.col with .gy-4

.col with .gy-4

.col with .g-3

.col with .g-3

.col with .g-3

.col with .g-3

.col with .g-3

.col with .g-3

Containers

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid