Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source Pylon project.

{ { < callout warning }} Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. Read more. { { < /callout }}

Vertical#

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

{ { < example class="bd-example-flex" }}

First item
Second item
Third item

{ {< /example >} }

Horizontal#

Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use .gap-* utilities to add space between items.

{ { < example class="bd-example-flex" }}

First item
Second item
Third item

{ {< /example >} }

Using horizontal margin utilities like .ms-auto as spacers:

{ { < example class="bd-example-flex" }}

First item
Second item
Third item

{ {< /example >} }

And with vertical rules:

{ { < example class="bd-example-flex" }}

First item
Second item
Third item

{ {< /example >} }

Examples#

Use .vstack to stack buttons and other elements:

{ {< example >} }

{ {< /example >} }

Create an inline form with .hstack:

{ {< example >} }

{ {< /example >} }

CSS#

{ { < scss-docs name="stacks" file="scss/helpers/_stacks.scss" }}