<div class="toast fade show" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20"
height="20"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%"
height="100%"
fill="#007aff"></rect>
</svg>
<strong class="me-auto">Bootstrap</strong>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div> <div class="toast fade show" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20"
height="20"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%"
height="100%"
fill="#007aff"></rect>
</svg>
<strong class="me-auto">Bootstrap</strong>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div> <div class="toast-container position-static">
<div class="toast fade show" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20"
height="20"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%"
height="100%"
fill="#007aff"></rect>
</svg>
<strong class="me-auto">Bootstrap</strong>
<small class="text-body-secondary">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast fade show" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20"
height="20"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%"
height="100%"
fill="#007aff"></rect>
</svg>
<strong class="me-auto">Bootstrap</strong>
<small class="text-body-secondary">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div> <div class="toast align-items-center fade show" 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>
</div><div class="toast align-items-center text-bg-primary border-0
fade show" 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>
</div> <div aria-live="polite" aria-atomic="true"
style="position: relative; min-height: 100px;">
<!-- Position it -->
<div style="position: absolute; top: 0; right: 0;">
<!-- Then put toasts within -->
<div class="toast show" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20"
height="20"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%"
height="100%"
fill="#007aff"></rect>
</svg>
<strong class="me-auto">Bootstrap</strong>
<small class="text-secondary">just now</small>
<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"
aria-label="Close">
</button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
</div>
</div> <div aria-live="polite" aria-atomic="true"
class="d-flex justify-content-center align-items-center
w-100">
<!-- Then put toasts within -->
<div class="toast fade show" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg class="bd-placeholder-img me-2" width="20"
height="20"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%"
height="100%"
fill="#007aff"></rect>
</svg>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>