0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/content/docs/5.3/helpers/stacks.md
XhmikosR cf9454caa0
Release v5.3.0-alpha1 (#37661)
* Bump version to 5.3.0-alpha1

* Dist

* Add docs versions updates

* Update note in homepage hero

Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-24 18:37:22 +02:00

2.9 KiB

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

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