Bootstrap/site/content/docs/5.1/helpers/stacks.md

layout	title	description	group	toc
docs	Stacks	Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.	helpers	true

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 >}}

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 >}}

First item

Second item

Third item

{{< /example >}}

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

{{< example >}}

First item

Second item

Third item

{{< /example >}}

And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):

{{< example >}}

First item

Second item

Third item

{{< /example >}}

Examples

Use .vstack to stack buttons and other elements:

{{< example >}}

Save changes Cancel

{{< /example >}}

Create an inline form with .hstack:

{{< example >}}

Submit

Reset

{{< /example >}}

Sass

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