diff options
| author | XhmikosR <[email protected]> | 2021-09-09 15:01:58 +0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-09-09 15:01:58 +0300 |
| commit | e961454738f4033eb2be68bde4b257ea9e0a7765 (patch) | |
| tree | 507ca252e706a9c692b133b6e18fb8504c488837 /site/content/docs/5.1/helpers | |
| parent | 86d5d5ea79e8eaa15a28b9da92bbee53036640f6 (diff) | |
| parent | 1df098361cac04217d6a464c80e890c4335ecb5c (diff) | |
| download | bootstrap-main-xmr-docs-render-heading.tar.xz bootstrap-main-xmr-docs-render-heading.zip | |
Merge branch 'main' into main-xmr-docs-render-headingmain-xmr-docs-render-heading
Diffstat (limited to 'site/content/docs/5.1/helpers')
| -rw-r--r-- | site/content/docs/5.1/helpers/stacks.md | 6 | ||||
| -rw-r--r-- | site/content/docs/5.1/helpers/text-truncation.md | 4 |
2 files changed, 7 insertions, 3 deletions
diff --git a/site/content/docs/5.1/helpers/stacks.md b/site/content/docs/5.1/helpers/stacks.md index a93a80046..20ca86aa0 100644 --- a/site/content/docs/5.1/helpers/stacks.md +++ b/site/content/docs/5.1/helpers/stacks.md @@ -8,6 +8,10 @@ toc: true 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. @@ -68,7 +72,7 @@ Create an inline form with `.hstack`: {{< example >}} <div class="hstack gap-3"> - <input class="form-control me-auto" type="text" placeholder="Add your item here..."> + <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here..."> <button type="button" class="btn btn-secondary">Submit</button> <div class="vr"></div> <button type="button" class="btn btn-outline-danger">Reset</button> diff --git a/site/content/docs/5.1/helpers/text-truncation.md b/site/content/docs/5.1/helpers/text-truncation.md index a92a171fd..799f2059b 100644 --- a/site/content/docs/5.1/helpers/text-truncation.md +++ b/site/content/docs/5.1/helpers/text-truncation.md @@ -12,12 +12,12 @@ For longer content, you can add a `.text-truncate` class to truncate the text wi <!-- Block level --> <div class="row"> <div class="col-2 text-truncate"> - Praeterea iter est quasdam res quas ex communi. + This text is quite long, and will be truncated once displayed. </div> </div> <!-- Inline level --> <span class="d-inline-block text-truncate" style="max-width: 150px;"> - Praeterea iter est quasdam res quas ex communi. + This text is quite long, and will be truncated once displayed. </span> {{< /example >}} |