Bootstrap 4 Grid Layout Demo
Sep 03, 2017 by Editorial Staff
Equal Width Simple Grid
One Column Width and Resize Other Columns
Variable Width Content
.col .col-lg-2
.col-md-auto (variable width)
.col .col-lg-2
.col
.col-md-auto (variable width)
.col .col-lg-2
Equal Width Multiple Rows Grid
.col
.col
.col
.col
.col
.col
Stacked Horizontal Grid
Horizontal Alignment
Grid with No Gutters
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
Wrapped Column Grid
.col-9 (Row 1)
.col-2 (Row 1)
.col-4 (Row 1)
.col-5 (Row 1)
Column Content Reordering within Grid
First .col No order
Second .col .order-12 moved to last
Third .col .order-1 moved to first
Column Offsetting
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
Nesting within Grid
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Bootstrap 4 Grid Layout Tutorial