#### Grid

#### Grid Options

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

| xs <576px | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px
--- | --- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Max container 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 | 24px (12px on each side of a column)
Custom gutters | Yes
Nestable | Yes
Offsets | Yes
Column ordering | Yes

#### Grid Example

Use flexbox alignment utilities to vertically and horizontally align columns

`col-lg-12`
`col-lg-11`
`col-lg-1`
`col-lg-10`
`col-lg-2`
`col-lg-9`
`col-lg-3`
`col-lg-8`
`col-lg-4`
`col-lg-7`
`col-lg-5`
`col-lg-6`
`col-lg-6`
`col-lg-5`
`col-lg-7`
`col-lg-4`
`col-lg-8`
`col-lg-3`
`col-lg-9`
`col-lg-2`
`col-lg-10`
`col-lg-1`
`col-lg-11`
`col-lg-2`
`col-lg-3`
`col-lg-4`
`col-lg-2`
`col-lg-1`

#### Alignment

Use flexbox alignment utilities to vertically and horizontally align columns

##### Vertical alignment (align-items-start)

`col-sm-4`
`col-sm-4`
`col-sm-4`

##### Align Items Center

`col-sm-4`
`col-sm-4`
`col-sm-4`

##### Align Items End

`col-sm-4`
`col-sm-4`
`col-sm-4`

##### Align Self

`align-self-start`
`align-self-center`
`align-self-end`

##### Horizontal Alignment

`justify-content-start`
`justify-content-center`
`justify-content-end`

##### Theme Customizer

###### Layout

Vertical
Horizontal

###### Layout Mode

Light
Dark

###### Layout Width

Fluid
Boxed

###### Layout Position

Fixed
Scrollable

###### Topbar Color

Light
Dark

###### Sidebar Size

###### Sidebar Color

###### Direction

LTR
RTL