Deliver push notifications to your visitors using toasts, lightweight and highly customizable alert messages. For complete instructions and customization options, refer to the official Bootstrap Documentation
Toasts are simple, flexible notifications designed to resemble the push notifications commonly used on mobile and desktop platforms. Built with flexbox, they are easy to position and align as needed.
Basic
Toasts require minimal markup and are highly adaptable. At the very least, you’ll need a container for your "toasted" content, and it’s strongly recommended to include a dismiss button for user interaction.
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<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 come with a slight translucency, allowing them to blend seamlessly over the content they overlay. For browsers that support the backdrop-filter CSS property, we also apply a blur effect to the elements beneath the toast, enhancing the visual experience.
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<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
You can easily customize your toasts by removing sub-components, adjusting them with utility classes, or incorporating your own markup. In this example, we’ve simplified the toast by omitting the default
.toast-header for a cleaner look.
<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.
<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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<span class="fw-medium me-auto">Bootstrap</span>
<small class="text-body-secondary">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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<span class="fw-medium me-auto">Bootstrap</span>
<small class="text-body-secondary">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 PRO
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>
Place toasts with custom CSS 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.
<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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<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>Bootstrap offers several predefined toast styles, each designed for a specific semantic purpose. Additionally, extra styles are available to give you more control over the appearance and behavior of your toasts.
<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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
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">
<i class="icon-base bx bx-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button
type="button"
class="btn-close btn-close-white"
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 |
Notyf is a JavaScript library designed for non-blocking notifications. It requires jQuery and aims to provide a simple, customizable core library that can be easily extended to suit your needs.
Usage
In order to use Notyf 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/notyf/notyf.css" />Include the following vendors script in the "Vendors JS" area from the page's footer:
<link rel="stylesheet" href="assets/vendor/libs/notyf/notyf.js" />