Grid System

Bootstrap 5 Grid Options

See how aspects of the Bootstrap 5 grid system work across multiple devices with this handy table.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px	Extra extra large ≥1400px
Container max-width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (0.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Basic Grid Examples

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

Equal Width Columns

.col

Setting One Column Width

.col

.col-6

.col

Variable Width Content

.col .col-lg-2

.col-md-auto (variable width)

.col .col-lg-2

Responsive Classes

The Bootstrap 5 grid includes six tiers of predefined classes for building complex responsive layouts.

.col-sm-8

.col-sm-4

.col-sm

Mix and Match

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Advanced Grid Features

Row Columns

Use responsive .row-cols-* classes to quickly set the number of columns.

Column

Nesting

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Level 1: .col-sm-3

Offsetting Columns

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

Gutters

Gutters can be responsively adjusted. Use .g-*, .gx-* or .gy-* utilities.

Custom gutter

Alignment

Vertical Alignment

align-items-start

align-items-center

align-items-end

Horizontal Alignment

justify-content-start

justify-content-center

justify-content-end

justify-content-around

justify-content-between

justify-content-evenly

Reordering

Order Classes

Use .order-* classes for controlling the visual order.

First in DOM, no order applied

Second in DOM, order-5

Third in DOM, order-1

Responsive Order

First on md+, last on mobile

Unordered

Last on md+, first on mobile