# 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`
`.col`
`.col`
`.col`
`.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`
`.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`
`.col-6 .col-md-4`
`.col-6 .col-md-4`

##### Vertical Alignment

Flexbox

Use flexbox alignment utilities to vertically and horizontally align columns.

`.align-items-start`
`.align-items-start`
`.align-items-start`
`.align-items-center`
`.align-items-center`
`.align-items-center`
`.align-items-end`
`.align-items-end`
`.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`
`.col-6 .col-sm-3`
`.col-6 .col-sm-3`
`.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-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`