Bootstrap 5 Grid System

A comprehensive demonstration of Bootstrap's responsive grid system capabilities.

Basic Grid

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.

.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-8
.col-sm-4
.col-sm (equal-width)
.col-sm (equal-width)
.col-sm (equal-width)

Responsive Grid

Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts.

col-12
col-sm-6
col-md-4
col-lg-3
col-xl-2
col-12
col-sm-6
col-md-4
col-lg-3
col-xl-2
col-12
col-sm-6
col-md-4
col-lg-3
col-xl-2
col-12
col-sm-6
col-md-4
col-lg-3
col-xl-2
col-12
col-sm-6
col-md-4
col-lg-3
col-xl-2
col-12
col-sm-6
col-md-4
col-lg-3
col-xl-2
.col-12 .col-md-8
.col-12 .col-md-4

Grid Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical Alignment

align-items-start
Top aligned
Column
align-items-center
Center aligned
Column
align-items-end
Bottom aligned
Column

Individual Column Alignment

align-self-start
align-self-center
align-self-end

Horizontal Alignment

justify-content-start
One more
justify-content-center
One more
justify-content-end
One more
justify-content-around
One more
justify-content-between
One more

Grid with Different Gutters

Bootstrap 5 added new gutter classes to control the spacing between columns.

Default Gutters

Regular column with default gutter
Regular column with default gutter

No Gutters (g-0)

Column with no gutter
Column with no gutter

Larger Gutters (g-4)

Column with larger gutter (g-4)
Column with larger gutter (g-4)

Horizontal Gutters Only (gx-5)

Column with horizontal gutter only
Column with horizontal gutter only
Notice the vertical spacing is default
While horizontal spacing is larger

Vertical Gutters Only (gy-5)

Column with vertical gutter only
Column with vertical gutter only
Notice the increased vertical spacing
While horizontal spacing is default

Offsetting Columns

Move columns to the right using offset classes.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3 (centered)

Nested Grids

You can nest rows and columns inside existing columns.

.col-sm-9
.col-8 .col-sm-6 (nested)
.col-4 .col-sm-6 (nested)
.col-sm-3

Column Ordering

Change the visual order of columns with order classes.

Normal Order

First in code
Second in code
Third in code

Reordered

First in code, Last visually
Second in code, First visually
Third in code, Second visually