<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded mr-2"alt="..."><strongclass="mr-auto">Bootstrap</strong><small>11 mins ago</small><buttontype="button"class="ml-2 mb-1 close"data-dismiss="toast"aria-label="Close"><iclass="material-icons">close</i></button></div><divclass="toast-body">
Hello, world! This is a toast message.
</div></div>
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Stacking
Stacking
<divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded mr-2"alt="..."><strongclass="mr-auto">Bootstrap</strong><smallclass="text-muted">just now</small><buttontype="button"class="ml-2 mb-1 close"data-dismiss="toast"aria-label="Close"><iclass="material-icons">close</i></button></div><divclass="toast-body">
See? Just like this.
</div></div><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded mr-2"alt="..."><strongclass="mr-auto">Bootstrap</strong><smallclass="text-muted">2 seconds ago</small><buttontype="button"class="ml-2 mb-1 close"data-dismiss="toast"aria-label="Close"><iclass="material-icons">close</i></button></div><divclass="toast-body">
Heads up, toasts will stack automatically
</div></div>
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
Right Align Toasts
Right Align Toasts
<divaria-live="polite"aria-atomic="true"style="position: relative; min-height: 200px;"><divclass="toast"style="position: absolute; top: 0; right: 0;"><divclass="toast-header"><imgsrc="..."class="rounded mr-2"alt="..."><strongclass="mr-auto">Bootstrap</strong><small>11 mins ago</small><buttontype="button"class="ml-2 mb-1 close"data-dismiss="toast"aria-label="Close"><iclass="material-icons">close</i></button></div><divclass="toast-body">
Hello, world! This is a toast message.
</div></div></div>
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Middle Align Toasts
Middle Align Toasts
<!-- Flexbox container for aligning the toasts --><divaria-live="polite"aria-atomic="true"class="d-flex justify-content-center align-items-center"style="min-height: 200px;"><!-- Then put toasts within --><divclass="toast"role="alert"aria-live="assertive"aria-atomic="true"><divclass="toast-header"><imgsrc="..."class="rounded mr-2"alt="..."><strongclass="mr-auto">Bootstrap</strong><small>11 mins ago</small><buttontype="button"class="ml-2 mb-1 close"data-dismiss="toast"aria-label="Close"><iclass="material-icons">close</i></button></div><divclass="toast-body">
Hello, world! This is a toast message.
</div></div></div>