diff options
| author | Mark Otto <[email protected]> | 2021-06-22 22:22:02 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2021-07-16 15:11:40 -0700 |
| commit | aee169d19288d78330be2df0960ea8924353f84f (patch) | |
| tree | 57fbb9abac3ccd8443ac54fa07f14f982671aae4 /site | |
| parent | 2bc6de1f5ea85e2b1e228e56c96b339dc105b1c8 (diff) | |
| download | bootstrap-aee169d19288d78330be2df0960ea8924353f84f.tar.xz bootstrap-aee169d19288d78330be2df0960ea8924353f84f.zip | |
Split .vr from stacks as a new helper
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.0/helpers/stacks.md | 4 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/vertical-rule.md | 44 | ||||
| -rw-r--r-- | site/data/sidebar.yml | 1 |
3 files changed, 46 insertions, 3 deletions
diff --git a/site/content/docs/5.0/helpers/stacks.md b/site/content/docs/5.0/helpers/stacks.md index 41c0ac546..a93a80046 100644 --- a/site/content/docs/5.0/helpers/stacks.md +++ b/site/content/docs/5.0/helpers/stacks.md @@ -42,9 +42,7 @@ Using horizontal margin utilities like `.ms-auto` as spacers: </div> {{< /example >}} -<div class="d-flex" style="height: 200px;"> -<div class="vr"></div> -</div> +And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}): {{< example >}} <div class="hstack gap-3"> diff --git a/site/content/docs/5.0/helpers/vertical-rule.md b/site/content/docs/5.0/helpers/vertical-rule.md new file mode 100644 index 000000000..8d0d6141f --- /dev/null +++ b/site/content/docs/5.0/helpers/vertical-rule.md @@ -0,0 +1,44 @@ +--- +layout: docs +title: Vertical rule +description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element. +group: helpers +toc: true +--- + +## How it works + +Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements: + +- They're `1px` wide +- They have `min-height` of `1em` +- Their color is set via `currentColor` and `opacity` + +Customize them with additional styles as needed. + +## Example + +{{< example >}} +<div class="vr"></div> +{{< /example >}} + +Vertical rules scale their height in flex layouts: + +{{< example >}} +<div class="d-flex" style="height: 200px;"> + <div class="vr"></div> +</div> +{{< /example >}} + +## With stacks + +They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}): + +{{< example >}} +<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="vr"></div> + <div class="bg-light border">Third item</div> +</div> +{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index fa37b8197..b4f63bfae 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -92,6 +92,7 @@ - title: Visually hidden - title: Stretched link - title: Text truncation + - title: Vertical rule - title: Utilities pages: |