Bootstrap 5.3 Layout Examples

Basic Equal-Width Columns

1 of 3
2 of 3
3 of 3

Specific Column Widths

col-3
col-6
col-3

Responsive Columns (Stack on Mobile)

Resize browser to see effect

col-12 col-md-4
col-12 col-md-4
col-12 col-md-4

Row Columns (Automatic Grid)

1 column on xs, 2 on sm, 3 on md, 4 on lg

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Custom Gutters

No Gutters (g-0)
No gutter
No gutter
No gutter
Large Gutters (g-5)
Large gutter
Large gutter
Large gutter

Vertical Alignment

Centered
Centered
Centered

Horizontal Justification

justify-content-center
Centered
Centered
justify-content-between
Left
Right
justify-content-evenly
Even
Even

Column Ordering

First in DOM, order-3
Second in DOM, order-1
Third in DOM, order-2

Column Offset

Centered with offset
Left
Offset right

Nested Columns

Level 1: col-9
Nested col-6
Nested col-6
Level 1: col-3

Sidebar Layout

Main Content

Responsive Card Grid

Card 1

This is a card in a responsive grid.

Card 2

Equal height cards using h-100.

Card 3

Grid uses row-cols for automatic layout.

CSS Grid (Experimental)

Bootstrap's CSS Grid is opt-in and requires Sass configuration to enable.

Basic CSS Grid (6 columns each)
g-col-6
g-col-6
Mixed Column Widths
g-col-4
g-col-8
Three Columns
g-col-4
g-col-4
g-col-4
Custom Column Count (3 columns)
1/3
2/3