stacks.md

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

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

{{< callout warning >}} Heads up! Support for gap utilities with flexbox isn't available in Safari prior to 14.5, 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]({{< docsref "/helpers/vertical-rule" >}}):

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

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:

See Bootstrap examples that are incompatible with Orange Design System.

{{< design-callout-alert >}} This variant with an **horizontal layout** (i.e. labels not above the input fields) should not be used because it does not respect the Orange Design System specifications. {{< /design-callout-alert >}}

{{< example >}}

Submit

Reset

{{< /example >}}

CSS

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