Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Live example
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
NioBoard
Hello, world! This is a toast message.
<button type="button" class="btn btn-primary" data-bs-toggle="toast" data-bs-target="liveToast" >Show live toast</button><div class="toast-container position-fixed bottom-0 end-0 p-3"> <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <div class="media-group"> <div class="media media-xs"> <img src="/images/favicon.png" alt="logo-icon"> </div> <div class="media-text"> <strong>NioBoard</strong> </div> </div> <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>Translucent
Toasts are slightly translucent to blend in with what’s below them.
NioBoard
Hello, world! This is a toast message.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <div class="media-group"> <div class="media media-xs"> <img src="/images/favicon.png" alt="logo-icon"> </div> <div class="media-text"> <strong>NioBoard</strong> </div> </div> <small class="text-muted">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>Stacking
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
NioBoard
See? Just like this.
NioBoard
Heads up, toasts will stack automatically
<div class="toast-container position-static"> <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <div class="media-group"> <div class="media media-xs"> <img src="/images/favicon.png" alt="logo-icon"> </div> <div class="media-text"> <strong>NioBoard</strong> </div> </div> <small class="text-muted">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"> <div class="media-group"> <div class="media media-xs"> <img src="/images/favicon.png" alt="logo-icon"> </div> <div class="media-text"> <strong>NioBoard</strong> </div> </div> <small class="text-muted">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>Custom content
Customize your toasts by removing sub-components
Hello, world! This is a toast message.
Alternatively, you can also add additional controls and components to toasts.
Hello, world! This is a toast message.
<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>Color schemes
Building on the above example, you can create different toast color schemes with our color and background utilities. Here we’ve added .text-bg-primary to the .toast, and then added .btn-close-white to our close button. For a crisp edge, we remove the default border with .border-0.
Hello, world! This is a toast message.
<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>
