root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

docs: work around Toast CSS conflict with utils (#32620) 

* Toast CSS conflict resolved

* Update toasts.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Siju Samson 2021-01-15 05:37:36 +05:30 committed by GitHub
parent b5bf3131fb
commit 9bec37a77b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/content/docs/5.0/components/toasts.md
View File

@ -96,11 +96,13 @@ You can stack toasts by wrapping them in a toast container, which will verticall
Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout. Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
{{< example class="bg-light" >}} {{< example class="bg-light" >}}
<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body"> <div class="toast-body">
Hello, world! This is a toast message. Hello, world! This is a toast message.
</div> </div>
<button type="button" class="btn-close ms-auto me-2" 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> </div>
{{< /example >}} {{< /example >}}
@ -123,11 +125,13 @@ 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 utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` 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`. Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` 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`.
{{< example class="bg-light" >}} {{< example class="bg-light" >}}
<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body"> <div class="toast-body">
Hello, world! This is a toast message. Hello, world! This is a toast message.
</div> </div>
<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div> </div>
{{< /example >}} {{< /example >}}