{{> head title="Grid System"}}
{{> sidebar-ela}}
{{> header-ela}}

#### 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
.col
.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
.col-sm
.col-sm

##### Mix and Match

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Advanced Grid Features

##### Row Columns

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

Column
Column
Column
Column
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
.col-md-3 .offset-md-3

##### Gutters

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

Custom gutter
Custom gutter
Custom gutter
Custom gutter
Alignment

##### Vertical Alignment

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

##### Horizontal Alignment

justify-content-start
justify-content-start
justify-content-center
justify-content-center
justify-content-end
justify-content-end
justify-content-around
justify-content-around
justify-content-between
justify-content-between
justify-content-evenly
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
{{> footer}}
{{> scripts}}