diff options
Diffstat (limited to '')
-rw-r--r-- | site/content/docs/5.3/helpers/stacks.md (renamed from site/content/docs/5.2/helpers/stacks.md) | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/site/content/docs/5.2/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md index e1960c5..2be6b30 100644 --- a/site/content/docs/5.2/helpers/stacks.md +++ b/site/content/docs/5.3/helpers/stacks.md @@ -17,11 +17,11 @@ Heads up! Support for gap utilities with flexbox was recently added to Safari, s Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items. -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="vstack gap-3"> - <div class="bg-light border">First item</div> - <div class="bg-light border">Second item</div> - <div class="bg-light border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} @@ -29,32 +29,32 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul 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 >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-light border">First item</div> - <div class="bg-light border">Second item</div> - <div class="bg-light border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} Using horizontal margin utilities like `.ms-auto` as spacers: -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-light border">First item</div> - <div class="bg-light border ms-auto">Second item</div> - <div class="bg-light border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}): -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-light border">First item</div> - <div class="bg-light border ms-auto">Second item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> <div class="vr"></div> - <div class="bg-light border">Third item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} @@ -80,6 +80,6 @@ Create an inline form with `.hstack`: </div> {{< /example >}} -## Sass +## CSS {{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}} |