site
content/docs/5.0
components
alerts.md +4 -4
badge.md +2 -2
button-group.md +2 -2
buttons.md +6 -6
card.md +4 -4
carousel.md +4 -4
collapse.md +4 -4
dropdowns.md +6 -6
list-group.md +2 -2
modal.md +4 -4
navbar.md +2 -2
navs.md +4 -4
popovers.md +12 -12
scrollspy.md +6 -6
spinners.md +2 -2
toasts.md +4 -4
tooltips.md +12 -12
content
reboot.md +4 -4
tables.md +4 -4
customize
components.md +6 -6
forms
checks-radios.md +2 -2
file.md +2 -2
overview.md +2 -2
validation.md +2 -2
getting-started
best-practices.md +2 -2
javascript.md +8 -8
helpers
ratio.md +2 -2
layout
breakpoints.md +2 -2
columns.md +2 -2
grid.md +2 -2
utilities
colors.md +4 -4
interactions.md +2 -2
text.md +2 -2
visibility.md +2 -2
layouts/shortcodes
callout.html +1 -1
@@ -22,9 +22,9 @@ Alerts are available for any length of text, as well as an optional close button
@@ -70,9 +70,9 @@ You can see this in action with a live demo:
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
@@ -18,13 +18,13 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
@@ -20,9 +20,9 @@ Bootstrap includes several predefined button styles, each serving its own semant
@@ -95,19 +95,19 @@ Disabled buttons using the `<a>` element behave a bit different:
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
@@ -386,9 +386,9 @@ Turn an image into a card background and overlay your card's text. Depending on
@@ -433,9 +433,9 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan