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>
