diff options
| author | Siju Samson <sijusamson@gmail.com> | 2021-01-15 03:07:36 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-01-15 03:07:36 +0300 |
| commit | 9bec37a77bcf6bc0f993687f1cbb1a99780246a6 (patch) | |
| tree | dcc436f0b35ba74615839868a12a24ce0efd748d | |
| parent | b5bf3131fb6170d3ad0485d18dda2c8f420658e0 (diff) | |
docs: work around Toast CSS conflict with utils (#32620)
* Toast CSS conflict resolved
* Update toasts.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
| -rw-r--r-- | site/content/docs/5.0/components/toasts.md | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index bd7bcae9cd..45cef6f453 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -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. {{< example class="bg-light" >}} -<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true"> - <div class="toast-body"> +<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="d-flex"> + <div class="toast-body"> Hello, world! This is a toast message. + </div> + <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button> </div> - <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button> </div> {{< /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`. {{< 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-body"> - Hello, world! This is a toast message. +<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"> + 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> </div> - <button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button> </div> {{< /example >}} |