1<!-- Bootstrap 5 Toasts -->
2<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
3 <div class="toast-header">
4 <img src="..." class="rounded me-2" alt="..." />
5 <strong class="me-auto">Bootstrap</strong>
6 <small>11 mins ago</small>
7 <button
8 type="button"
9 class="btn-close"
10 data-bs-dismiss="toast"
11 aria-label="Close"
12 ></button>
13 </div>
14 <div class="toast-body">Hello, world! This is a toast message.</div>
15</div>
1<!-- Flexbox container for aligning the toasts -->
2<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
3
4 <!-- Then put toasts within -->
5 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
6 <div class="toast-header">
7 <img src="..." class="rounded mr-2" alt="...">
8 <strong class="mr-auto">Bootstrap</strong>
9 <small>11 mins ago</small>
10 <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
11 <span aria-hidden="true">×</span>
12 </button>
13 </div>
14 <div class="toast-body">
15 Hello, world! This is a toast messag e.
16 </div>
17 </div>
18</div>
1<!-- Flexbox container for aligning the toasts -->
2<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
3
4 <!-- Then put toasts within -->
5 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
6 <div class="toast-header">
7 <img src="..." class="rounded mr-2" alt="...">
8 <strong class="mr-auto">Bootstrap</strong>
9 <small>11 mins ago</small>
10 <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
11 <span aria-hidden="true">×</span>
12 </button>
13 </div>
14 <div class="toast-body">
15 Hello, world! This is a toast message.
16 </div>
17 </div>
18</div>