Bootstrap 4 Grid Layout Demo

This is a demo page to showcase Bootstrap 4 grid layouts.

Bootstrap 4 Grid Layout Tutorial

Bootstrap 4 Grid Layout Demo

Equal Width Simple Grid

.col
.col
.col
.col
.col

One Column Width and Resize Other Columns

.col
.col-6
.col
.col
.col-5
.col

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

.col-sm-8
.col-sm-4
.col-sm
.col-sm
.col-sm

Horizontal Alignment

.col-4
.col-4
.col-4
.col-4
.col-4
.col-4
.col-4
.col-4
.col-4
.col-4

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