web/bootstrap-html
1
0
Fork 0
Code Issues Activity

Merging upstream version 5.3.0+dfsg.

Browse source 
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
Daniel Baumann 2025-02-17 07:08:19 +01:00
parent a87fc4fcc7
commit e92720b6a7
Signed by: daniel
GPG key ID: FBB4F0E80A80222F
605 changed files with 15320 additions and 9495 deletions
Download patch file Download diff file Expand all files Collapse all files

36
site/content/docs/5.3/helpers/clearfix.md Normal file
View file

@ -0,0 +1,36 @@
---
layout: docs
title: Clearfix
description: Quickly and easily clear floated content within a container by adding a clearfix utility.
group: helpers
aliases: "/docs/5.3/helpers/"
---
Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
Use in HTML:
```html
<div class="clearfix">...</div>
```
The mixin source code:
{{< scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" >}}
Use the mixin in SCSS:
```scss
.element {
@include clearfix;
}
```
The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
{{< example >}}
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
<button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
</div>
{{< /example >}}

54
site/content/docs/5.3/helpers/color-background.md Normal file
View file

@ -0,0 +1,54 @@
---
layout: docs
title: Color and background
description: Set a background color with contrasting foreground color.
group: helpers
toc: true
added: "5.2"
---
## Overview
Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.
{{< callout warning >}}
**Heads up!** There's currently no support for a CSS-native `color-contrast` function, so we use our own via Sass. This means that customizing our theme colors via CSS variables may cause color contrast issues with these utilities.
{{< /callout >}}
{{< example >}}
{{< text-bg.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="text-bg-{{ .name }} p-3">{{ .name | title }} with contrasting color</div>
{{- end -}}
{{< /text-bg.inline >}}
{{< /example >}}
{{< callout info >}}
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}
## With components
Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}):
{{< example >}}
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>
{{< /example >}}
Or on [cards]({{< docsref "/components/card#background-and-color" >}}):
{{< example >}}
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
{{< /example >}}

43
site/content/docs/5.3/helpers/colored-links.md Normal file
View file

@ -0,0 +1,43 @@
---
layout: docs
title: Colored links
description: Colored links with hover states
group: helpers
toc: true
---
## Link colors
You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
{{< callout info >}}
**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
{{< /callout >}}
{{< example >}}
{{< colored-links.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<p><a href="#" class="link-{{ .name }}">{{ .name | title }} link</a></p>
{{- end -}}
{{< /colored-links.inline >}}
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>
{{< /example >}}
{{< callout info >}}
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}
## Link utilities
{{< added-in "5.3.0" >}}
Colored links can also be modified by our [link utilities]({{< docsref "/utilities/link/" >}}).
{{< example >}}
{{< colored-links.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p>
{{- end -}}
{{< /colored-links.inline >}}
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>
{{< /example >}}

68
site/content/docs/5.3/helpers/focus-ring.md Normal file
View file

@ -0,0 +1,68 @@
---
layout: docs
title: Focus ring
description: Utility classes that allows you to add and modify custom focus ring styles to elements and components.
group: helpers
toc: true
added: "5.3"
---
The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component.
## Example
Click directly on the link below to see the focus ring in action, or into the example below and then press <kbd>Tab</kbd>.
{{< example >}}
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>
{{< /example >}}
## Customize
Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles.
### CSS variables
Modify the `--bs-focus-ring-*` CSS variables as needed to change the default appearance.
{{< example >}}
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
Green focus ring
</a>
{{< /example >}}
`.focus-ring` sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts.
{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values. Modify them to change the default appearance.
{{< example >}}
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
Blurry offset focus ring
</a>
{{< /example >}}
### Sass variables
Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
### Sass utilities API
In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.
{{< example >}}
{{< focus-ring.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<p><a href="#" class="d-inline-flex focus-ring focus-ring-{{ .name }} py-1 px-2 text-decoration-none border rounded-2">{{ title .name }} focus</a></p>
{{- end -}}
{{< /focus-ring.inline >}}
{{< /example >}}
Focus ring utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
{{< scss-docs name="utils-focus-ring" file="scss/_utilities.scss" >}}

88
site/content/docs/5.3/helpers/icon-link.md Normal file
View file

@ -0,0 +1,88 @@
---
layout: docs
title: Icon link
description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
group: helpers
toc: true
added: 5.3
---
The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like.
{{< callout >}}
When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the SVGs.
{{< /callout >}}
## Example
Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.
{{< example >}}
<a class="icon-link" href="#">
<svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
Icon link
</a>
{{< /example >}}
{{< example >}}
<a class="icon-link" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
{{< /example >}}
## Style on hover
Add `.icon-link-hover` to move the icon to the right on hover.
{{< example >}}
<a class="icon-link icon-link-hover" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
{{< /example >}}
## Customize
Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
### CSS variables
Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance.
Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
{{< example >}}
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
Icon link
</a>
{{< /example >}}
Customize the color by overriding the `--bs-link-*` CSS variable:
{{< example >}}
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
{{< /example >}}
### Sass variables
Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}
### Sass utilities API
Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
{{< example >}}
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
Icon link
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>
{{< /example >}}

63
site/content/docs/5.3/helpers/position.md Normal file
View file

@ -0,0 +1,63 @@
---
layout: docs
title: Position
description: Use these helpers for quickly configuring the position of an element.
group: helpers
toc: true
---
## Fixed top
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
```html
<div class="fixed-top">...</div>
```
## Fixed bottom
Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
```html
<div class="fixed-bottom">...</div>
```
## Sticky top
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it.
```html
<div class="sticky-top">...</div>
```
## Responsive sticky top
Responsive variations also exist for `.sticky-top` utility.
```html
<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
```
## Sticky bottom
Position an element at the bottom of the viewport, from edge to edge, but only after you scroll past it.
```html
<div class="sticky-bottom">...</div>
```
## Responsive sticky bottom
Responsive variations also exist for `.sticky-bottom` utility.
```html
<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
```

81
site/content/docs/5.3/helpers/ratio.md Normal file
View file

@ -0,0 +1,81 @@
---
layout: docs
title: Ratios
description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
group: helpers
toc: true
---
## About
Use the ratio helper to manage the aspect ratios of external content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied from the parent `.ratio` class directly to the child.
Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
{{< callout info >}}
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}).
{{< /callout >}}
## Example
Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector `.ratio > *`.
{{< example >}}
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
{{< /example >}}
## Aspect ratios
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
{{< example class="bd-example-ratios" >}}
<div class="ratio ratio-1x1">
<div>1x1</div>
</div>
<div class="ratio ratio-4x3">
<div>4x3</div>
</div>
<div class="ratio ratio-16x9">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9">
<div>21x9</div>
</div>
{{< /example >}}
## Custom ratios
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 `--bs-aspect-ratio: 50%` on the `.ratio`.
{{< example class="bd-example-ratios" >}}
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
{{< /example >}}
This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.
```scss
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
```
{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
{{< /example >}}
## Sass maps
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
{{< scss-docs name="aspect-ratios" file="scss/_variables.scss" >}}

85
site/content/docs/5.3/helpers/stacks.md Normal file
View file

@ -0,0 +1,85 @@
---
layout: docs
title: Stacks
description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
group: helpers
toc: true
added: "5.1"
---
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.
{{< example class="bd-example-flex" >}}
<div class="vstack gap-3">
<div class="p-2">First item</div>
<div class="p-2">Second item</div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}
## Horizontal
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 class="bd-example-flex" >}}
<div class="hstack gap-3">
<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 class="bd-example-flex" >}}
<div class="hstack gap-3">
<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 class="bd-example-flex" >}}
<div class="hstack gap-3">
<div class="p-2">First item</div>
<div class="p-2">Second item</div>
<div class="vr"></div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}
## Examples
Use `.vstack` to stack buttons and other elements:
{{< example >}}
<div class="vstack gap-2 col-md-5 mx-auto">
<button type="button" class="btn btn-secondary">Save changes</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>
{{< /example >}}
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..." 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>
</div>
{{< /example >}}
## CSS
{{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}}

74
site/content/docs/5.3/helpers/stretched-link.md Normal file
View file

@ -0,0 +1,74 @@
---
layout: docs
title: Stretched link
description: Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS.
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. 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.
Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required.
{{< example >}}
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
{{< /example >}}
Most custom components do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the parent element.
{{< example >}}
<div class="d-flex position-relative">
{{< 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>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-body-secondary position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
{{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
</div>
<div class="col-md-6 p-4 ps-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<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>
{{< /example >}}
## Identifying the containing block
If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block:
- A `position` value other than `static`
- A `transform` or `perspective` value other than `none`
- A `will-change` value of `transform` or `perspective`
- A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox)
{{< example >}}
<div class="card" style="width: 18rem;">
{{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
<div class="card-body">
<h5 class="card-title">Card with stretched links</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
</p>
<p class="card-text bg-body-tertiary" style="transform: rotate(0);">
This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
</p>
</div>
</div>
{{< /example >}}

23
site/content/docs/5.3/helpers/text-truncation.md Normal file
View file

@ -0,0 +1,23 @@
---
layout: docs
title: Text truncation
description: Truncate long strings of text with an ellipsis.
group: helpers
toc: false
---
For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
{{< example >}}
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
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;">
This text is quite long, and will be truncated once displayed.
</span>
{{< /example >}}

45
site/content/docs/5.3/helpers/vertical-rule.md Normal file
View file

@ -0,0 +1,45 @@
---
layout: docs
title: Vertical rule
description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
group: helpers
toc: true
added: "5.1"
---
## 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 class="bd-example-flex" >}}
<div class="hstack gap-3">
<div class="p-2">First item</div>
<div class="p-2 ms-auto">Second item</div>
<div class="vr"></div>
<div class="p-2">Third item</div>
</div>
{{< /example >}}

29
site/content/docs/5.3/helpers/visually-hidden.md Normal file
View file

@ -0,0 +1,29 @@
---
layout: docs
title: Visually hidden
description: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
group: helpers
aliases: "/docs/5.3/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). `.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
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}
```