diff options
| author | louismaximepiton <[email protected]> | 2023-01-17 09:54:54 +0100 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2023-01-17 10:39:49 -0800 |
| commit | 16aff741ecf47b2ce682b625c1a6ab3ae80f8256 (patch) | |
| tree | caaef53ed1f97bc701340a025f8ea9b4bfd3edfb | |
| parent | 5dc7f4c165c39b63eb5541a66d5ad443e35aaf09 (diff) | |
| download | bootstrap-16aff741ecf47b2ce682b625c1a6ab3ae80f8256.tar.xz bootstrap-16aff741ecf47b2ce682b625c1a6ab3ae80f8256.zip | |
Proposal
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.3/helpers/stacks.md | 32 | ||||
| -rw-r--r-- | site/content/docs/5.3/helpers/vertical-rule.md | 8 |
3 files changed, 21 insertions, 21 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 6c6cc677f..25385cf8e 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -134,7 +134,7 @@ background-color: rgba(var(--bd-violet-rgb), .15); } -.bd-example-flex div { +.bd-example-flex div:not(.vr) { background-color: rgba(var(--bd-violet-rgb), .15); border: 1px solid rgba(var(--bd-violet-rgb), .3); } diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md index b8133ba45..2be6b30b4 100644 --- a/site/content/docs/5.3/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-body-tertiary border">First item</div> - <div class="bg-body-tertiary border">Second item</div> - <div class="bg-body-tertiary 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-body-tertiary border">First item</div> - <div class="bg-body-tertiary border">Second item</div> - <div class="bg-body-tertiary 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-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> - <div class="bg-body-tertiary 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-body-tertiary border">First item</div> - <div class="bg-body-tertiary 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-body-tertiary border">Third item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} diff --git a/site/content/docs/5.3/helpers/vertical-rule.md b/site/content/docs/5.3/helpers/vertical-rule.md index f10a16d08..334eb3e0a 100644 --- a/site/content/docs/5.3/helpers/vertical-rule.md +++ b/site/content/docs/5.3/helpers/vertical-rule.md @@ -35,11 +35,11 @@ Vertical rules scale their height in flex layouts: They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}): -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> + <div class="p-2">First item</div> + <div class="p-2 ms-auto">Second item</div> <div class="vr"></div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} |