Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Toasts on BootstrapBasic Example
Bootstrap11 mins ago
Hello, world! This is a toast message.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong><small>11 mins ago</small>
<button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
Bootstrap
just now
See? Just like this.
Bootstrap2 seconds ago
Heads up, toasts will stack automatically
<div class="toast show mb-2" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now
</small>
<button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">See? Just like this.</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong><small class="text-muted">2 seconds ago</small>
<button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Heads up, toasts will stack automatically</div>
</div>Placement
Place toasts with the helper classes as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.
Example
Bootstrap11 mins ago
Hello, world! This is a toast message.
<div class="position-relative" aria-live="polite" aria-atomic="true" style="min-height: 90px;">
<div class="toast show position-absolute top-0 end-0">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong><small>11 mins ago</small>
<button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
Bootstrap11 mins ago
Hello, world! This is a toast message.
<div class="d-flex flex-center" aria-live="polite" aria-atomic="true" style="min-height: 300px;">
<div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="toast-header"><strong class="me-auto">Bootstrap</strong><small>11 mins ago</small>
<button class="ms-2 btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>Live Toast
Bootstrap11 mins ago
Hello, world! This is a toast message.
<button class="btn btn-primary" id="liveToastBtn" type="button">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div class="toast fade" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-primary text-white"><strong class="me-auto">Bootstrap</strong><small>11 mins ago</small>
<button class="btn-close btn-close-white" type="button" 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, too, so they blend over whatever they might appear over.
Bootstrap11 mins ago
Hello, world! This is a toast message.
<div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="toast-header text-bg-light"><strong class="me-auto">Bootstrap</strong><small class="text-muted">11 mins ago</small>
<button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-bg-light">Hello, world! This is a toast message.</div>
</div>Color schemes
Hello, world! This is a toast message.
<div class="d-flex">
<div class="toast show align-items-center text-white bg-primary border-0" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body text-bg-primary">
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>Custom Content
You can also add additional controls and components to toasts.
Hello, world! This is a toast message.
<div class="toast show align-items-center" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">Hello, world! This is a toast message.</div>
<button class="btn-close me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="mt-2 p-3 border-top">
<button class="btn btn-primary btn-sm" type="button">Take action</button>
<button class="btn btn-secondary btn-sm ms-2" type="button" data-bs-dismiss="toast">Close</button>
</div>
</div>
