diff options
Diffstat (limited to 'site/content/docs/5.0/helpers')
| -rw-r--r-- | site/content/docs/5.0/helpers/colored-links.md | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/ratio.md | 6 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/stretched-link.md | 7 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/visually-hidden.md | 5 |
4 files changed, 11 insertions, 9 deletions
diff --git a/site/content/docs/5.0/helpers/colored-links.md b/site/content/docs/5.0/helpers/colored-links.md index ffaf7cdba..e940196ff 100644 --- a/site/content/docs/5.0/helpers/colored-links.md +++ b/site/content/docs/5.0/helpers/colored-links.md @@ -6,7 +6,7 @@ group: helpers toc: false --- -You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors#colors" >}}), these classes have a `:hover` and `:focus` state. +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. {{< example >}} {{< colored-links.inline >}} diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index 62e173ff1..771bc07cb 100644 --- a/site/content/docs/5.0/helpers/ratio.md +++ b/site/content/docs/5.0/helpers/ratio.md @@ -49,10 +49,10 @@ Aspect ratios can be customized with modifier classes. By default the following Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part. -For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`. +For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`. {{< example class="bd-example-ratios" >}} -<div class="ratio" style="--aspect-ratio: 50%;"> +<div class="ratio" style="--bs-aspect-ratio: 50%;"> <div>2x1</div> </div> {{< /example >}} @@ -62,7 +62,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T ```scss .ratio-4x3 { @include media-breakpoint-up(md) { - --aspect-ratio: 50%; // 2x1 + --bs-aspect-ratio: 50%; // 2x1 } } ``` diff --git a/site/content/docs/5.0/helpers/stretched-link.md b/site/content/docs/5.0/helpers/stretched-link.md index 743796850..93bffeb31 100644 --- a/site/content/docs/5.0/helpers/stretched-link.md +++ b/site/content/docs/5.0/helpers/stretched-link.md @@ -5,7 +5,7 @@ description: Make any HTML element or Bootstrap component clickable by "stretchi group: helpers --- -Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. +Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements. Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes. @@ -29,13 +29,12 @@ Most custom components do not have `position: relative` by default, so we need t {{< placeholder width="144" height="144" class="flex-shrink-0 me-3" text="false" title="Generic placeholder image" >}} <div> <h5 class="mt-0">Custom component with stretched link</h5> - <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> + <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p> <a href="#" class="stretched-link">Go somewhere</a> </div> </div> {{< /example >}} - {{< example >}} <div class="row g-0 bg-light position-relative"> <div class="col-md-6 mb-md-0 p-md-4"> @@ -43,7 +42,7 @@ Most custom components do not have `position: relative` by default, so we need t </div> <div class="col-md-6 p-4 ps-md-0"> <h5 class="mt-0">Columns with stretched link</h5> - <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p> + <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p> <a href="#" class="stretched-link">Go somewhere</a> </div> </div> diff --git a/site/content/docs/5.0/helpers/visually-hidden.md b/site/content/docs/5.0/helpers/visually-hidden.md index f80160edd..d8148b3f3 100644 --- a/site/content/docs/5.0/helpers/visually-hidden.md +++ b/site/content/docs/5.0/helpers/visually-hidden.md @@ -6,13 +6,16 @@ group: helpers aliases: "/docs/5.0/helpers/screen-readers/" --- -Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). Can also be used as mixins. +Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus. {{< example >}} <h2 class="visually-hidden">Title for screen readers</h2> <a class="visually-hidden-focusable" href="#content">Skip to main content</a> +<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div> {{< /example >}} +Both `visually-hidden` and `visually-hidden-focusable` can also be used as mixins. + ```scss // Usage as a mixin |