mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Docs: handle deprecated dark variants more precisely

Browse Source
This commit is contained in:
Julien Déramond
2023-10-12 14:43:42 +02:00
parent ce114117a8
commit f81365bbc9
22 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
site/content/docs/5.3/components/toasts.md
View File

@@ -172,13 +172,17 @@ Alternatively, you can also add additional controls and components to toasts.
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
{{< callout warning >}}
**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
{{< /callout >}}
{{< example >}}
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-theme="dark">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
{{< /example >}}