@@include("partials/main.html") @@include("partials/title-meta.html", {"title": "Grid"}) @@include("partials/head-css.html") @@include("partials/body.html")
@@include("partials/menu.html")
@@include("partials/page-title.html", {"pagetitle": "Components", "title": "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`

#### Stacks

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.

##### Vertical Stacks (`.vstack`)

First item
Second item
Third item

##### Horizontal Stacks (`.hstack`)

First item
Second item
Third item

##### Horizontal Stacks (`.hstack`) with Vertical Rule (`.vr`)

First item
Second item
Third item
@@include("partials/footer.html")
@@include("partials/right-sidebar.html") @@include("partials/vendor-scripts.html")