mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 12:21:35 +02:00
Code Issues Releases Wiki Activity

Add z-index for .toast-container (#35859)

Browse Source 
* Add z-index for .toast-container

- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better

Fixes $34028

* Remove unnecessary z-index from docs examples
This commit is contained in:
Mark Otto
2022-02-25 08:49:02 -08:00
committed by GitHub
parent 2c5a16ff8b
commit 28d9aaf670
3 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
site/content/docs/5.1/components/toasts.md
View File

@@ -49,7 +49,7 @@ Previously, our scripts dynamically added the `.hide` class to completely hide a
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low
```html
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
@@ -122,7 +122,7 @@ Toasts are slightly translucent to blend in with what's below them.
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
{{< example class="bg-light" >}}
<div class="toast-container">
<div class="toast-container position-static">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}