Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Read
the
official Bootstrap Documentation for a full list of
instructions and other options.
Example
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
Basic
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that
support
the backdrop-filter CSS property, we’ll also attempt to blur the elements under a toast.
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>Custom content
Customize your toasts by removing sub-components, tweaking with utilities, or adding your own markup. Here we’ve created a simpler toast by removing the default .toast-header
<div class="toast fade show bs-toast align-items-center" 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>Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
Bootstrap
just now
Bootstrap
2 seconds ago
<div class="toast-container position-relative">
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="" />
<span class="fw-medium me-auto">Bootstrap</span>
<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="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="" />
<span class="fw-medium me-auto">Bootstrap</span>
<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>Animation
Use animate.css to use animation in Bootstrap Toasts.
Usage
In order to use animate.css on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/animate-css/animate.css" /><div class="bs-toast toast fade show animate__animated animate__flipInX" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>Placement
Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top center. If you’re only ever going to show one toast at a time, put the positioning classes right on the .toast.
<div class="bs-toast toast fade show position-absolute top-0 end-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>Styles
Several predefined toasts styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<div class="toast-container position-relative">
<!-- Default Toast -->
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>
<!-- Primary Toast -->
<div class="bs-toast toast fade show bg-primary" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>
<!-- Secondary Toast -->
<div class="bs-toast toast fade show bg-secondary" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>
<!-- Success Toast -->
<div class="bs-toast toast fade show bg-success" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>
<!-- Warning Toast -->
<div class="bs-toast toast fade show bg-warning" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>
<!-- Info Toast -->
<div class="bs-toast toast fade show bg-info" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>
<!-- Danger Toast -->
<div class="bs-toast toast fade show bg-danger" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>
<!-- Dark Toast -->
<div class="bs-toast toast fade show bg-dark" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="assets/img/avatars/1.png" class="d-block w-px-20 h-auto rounded me-2" alt="" />
<div class="me-auto fw-medium">Bootstrap</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>| Class | Value |
|---|---|
class="bg-{value}"
|
primary | secondary | success | danger | warning | info | light | dark |
Toastr
Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.
Usage
In order to use Toastr on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/toastr/toastr.css" />Include the following vendors script in the "Vendors JS" area from the page's footer:
<link rel="stylesheet" href="assets/vendor/libs/toastr/toastr.js" />