Bootstrap Toast
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. It's built with flexbox, so they’re easy to align and position.
Basic Examples
Toasts are lightweight notifications designed to mimic the push notifications.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Code Example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div>
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Code Example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div>
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
Code Example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small class="text-muted">just now</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> See? Just like this. </div> </div> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Heads up, toasts will stack automatically </div> </div>
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Code Example
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> <div class="toast" style="position: absolute; top: 0; right: 0;"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div>
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
Code Example
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"> <!-- Position it --> <div style="position: absolute; top: 0; right: 0;"> <!-- Then put toasts within --> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small class="text-muted">just now</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> See? Just like this. </div> </div> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Heads up, toasts will stack automatically </div> </div> </div> </div>
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Code Example
<!-- Flexbox container for aligning the toasts --> <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;"> <!-- Then put toasts within --> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div>
Bootstrap
11 mins ago
Hello, world! This is a toast message.
Code Example
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"> <div class="toast-header"> <strong class="mr-auto text-primary">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div>