From db46bfc03f3a22752ef6bd91ae577d893872a216 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:40 +0200 Subject: Merging upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/content/docs/5.2/helpers/stacks.md | 85 --------------------------------- 1 file changed, 85 deletions(-) delete mode 100644 site/content/docs/5.2/helpers/stacks.md (limited to 'site/content/docs/5.2/helpers/stacks.md') diff --git a/site/content/docs/5.2/helpers/stacks.md b/site/content/docs/5.2/helpers/stacks.md deleted file mode 100644 index e1960c5..0000000 --- a/site/content/docs/5.2/helpers/stacks.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -layout: docs -title: Stacks -description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. -group: helpers -toc: true -added: "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](https://almonk.github.io/pylon/). - -{{< 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](https://caniuse.com/flexbox-gap). -{{< /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 >}} -
- - -
-{{< /example >}} - -Create an inline form with `.hstack`: - -{{< example >}} -
- - -
- -
-{{< /example >}} - -## Sass - -{{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}} -- cgit v1.2.3