Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with `.hide`.
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" 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" >}}
```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: 5">
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">