Bootstrap 5 Grid System

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, and dozens of predefined classes.

Equal Width Columns

Auto Layout

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

.col

Setting One Column Width

Flexible

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.

.col

.col-6

.col

.col-5

.col

Variable Width Content

Auto-sizing

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

.col .col-lg-2

.col-md-auto
Variable width content

.col .col-lg-2

Responsive Classes

Breakpoints

Bootstrap's grid includes six 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-8 .col-lg-9 .col-xl-10

.col-6 .col-md-4

Vertical Alignment

Flexbox

Use flexbox alignment utilities to vertically and horizontally align columns.

.align-items-start

.align-items-center

.align-items-end

Column Wrapping

Auto-wrap

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

Column Breaks

w-100

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line.

.col-6 .col-sm-3

Order Classes

Flexbox Order

Use .order- classes for controlling the visual order of your content.

First in DOM, but .order-3

Second in DOM, but .order-1

Third in DOM, but .order-2

Offsetting Columns

Offset

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns.

.col-md-4

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

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

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

Nesting

Nested Grids

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.

Level 1: .col-sm-3

Level 1: .col-sm-9

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

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