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.
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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</div>
<button type="button" class="btn-close me-3 mt-3 mb-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">
<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 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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</div>
</div>
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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</div>
</div>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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</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">
Fruitcake chocolate bar tootsie roll gummies gummies jelly beans cake.
</div>
</div>
</div>| Class | Value |
|---|---|
class="bg-{value}"
|
primary | secondary | success | danger | warning | info | light | dark |
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" />