”;
This chapter discusses about the component toasts. Toasts are like alert messages, that are lightweight and customizable. Toasts are a useful tool for providing responsive and unobtrusive notifications to the user.
-
Toasts in Bootstrap are used to display non-blocking notifications at the bottom or top of the screen.
-
They can provide feedback or alert the user to certain events or actions, without interrupting their current task.
-
Toasts can contain text, images, or any other HTML content, and can be customized to fit the design of the website or application.
-
They can also be dismissed by the user or have a set duration before disappearing on their own.
-
You must initialize the toasts yourself, as they are opt-in for performance reasons.
-
If you do not specify autohide: false, toasts will automatically hide.
-
The animation effect of the toast component is dependent on the prefers-reduced-motion media query.
-
A header and a body is recommended to be added to a toast to make it more extensible and predictable.
-
You require a single element to contain your toast and must have a dismiss button.
Basic toast
In order to create a basic toast, you need to use the .toast class and add a .toast-header to provide a heading and a .toast-body to add the content.
Let us see an example of a basic toast:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h3>Toast Example</h3>
<p>A toast is like an alert box that is shown.</p>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<small>A toast without an event</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Toast is shown without any event like on a click of a button.
</div>
</div>
</div>
</body>
</html>
In the past, the .hide class was added automatically to completely hide a toast with display:none instead of using opacity:0. Now, this is no longer needed.
The following JavaScript query is used to trigger a toast:
const toastTrigger = document.getElementById(''liveToastBtn'') const toastLiveExample = document.getElementById(''liveToast'') if (toastTrigger) { const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) toastTrigger.addEventListener(''click'', () => { toastBootstrap.show() }) }
OR
$(document).ready(function() { $(''#liveToast'').click(function() { $(''.toast'').toast({ animation: false, delay: 3000 }); $(''.toast'').toast(''show''); }); });
Add the following link in your html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
Live toast
Following is an example of a live toast that can be viewed on your page:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class="container mx-auto mt-2">
<h4>View Live toast</h4>
<button type="button" class="btn btn-success" id="liveToast">View toast live</button>
<div class="toast-container position-fixed bottom-0 end-0 p-4">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Live Toast</strong>
<small>Now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is a live toast and placed at the bottom of the page.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(''#liveToast'').click(function() {
$(''.toast'').toast({
animation: false,
delay: 3000
});
$(''.toast'').toast(''show'');
});
});
</script>
</body>
</html>
Translucent toast
Toasts are somewhat translucent and blend with the page on which they appear.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
<h4>Translucent toast</h4>
<button type="button" class="btn btn-success" id="viewToast">Click for toast</button>
<div class="toast-container position-top top-0">
<div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Translucent Toast</strong>
<small class="text-body-secondary">First toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is a translucent toast and placed at the top of the page.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(''#viewToast'').click(function() {
$(''.toast'').toast({
animation: false,
delay: 3000
});
$(''.toast'').toast(''show'');
});
});
</script>
</body>
</html>
Stacking of toasts
Toasts can be stacked in a toast container by wrapping them. Vertical space is added to the toasts when stacked.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
<h4>Stacking of toasts</h4>
<button type="button" class="btn btn-success" id="viewToast">View stacked toasts</button>
<!-- First Toast -->
<div class="toast-container position-top top-0">
<div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast 1</strong>
<small class="text-body-secondary">First toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-bg-warning">
This is toast 1 and is placed at the top of the page.
</div>
</div>
<!-- Second Toast -->
<div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast 2</strong>
<small class="text-body-secondary">Second toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body text-bg-info">
This is toast 2 and is placed below toast 1.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(''#viewToast'').click(function() {
$(''.toast'').toast({
animation: false,
delay: 3000
});
$(''.toast'').toast(''show'');
});
});
</script>
</body>
</html>
Custom content
-
The toasts can be customized by removing the sub-components, adding some utilities or even for that matter, your own markup.
-
You can add a custom icon from Bootstrap icons or remove the .toast-header, add buttons to the content, etc.
Let us see an example for the customization of a toast, where two buttons are added to the toast body:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
<h4>Customization of toasts</h4>
<!-- Button to trigger the toasts -->
<button type="button" class="btn btn-primary" id="myBtn">View customized toast</button>
<div class="toast-container">
<div class="toast">
<div class="toast-header bg-secondary-subtle">
<strong>Thanks</strong>
</div>
<div class="toast-body text-bg-secondary">Buttons are added to the toast.</div>
<button type="button" class="btn btn-success btn-sm">Submit</button>
<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast" aria-label="Close">Cancel</button>
</div>
</div>
<script>
$(document).ready(function() {
$(''#myBtn'').click(function() {
$(''.toast'').toast({
animation: false,
delay: 3000
});
$(''.toast'').toast(''show'');
});
});
</script>
</body>
</html>
Color schemes
Different toast color schemes can be created using the colors and background utilities.
Let us see an example of adding the color scheme to a toast:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
<h4>Color scheme</h4>
<p>Color scheme added to the toast</p>
<!-- Button to trigger the toasts -->
<button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
<div class="toast-container">
<div class="toast">
<div class="toast-header bg-warning-subtle">
<strong>Toast Header</strong>
</div>
<div class="toast-body text-bg-success">Color scheme is added to the header and body of the toast.</div>
</div>
</div>
<script>
$(document).ready(function() {
$(''#myBtn'').click(function() {
$(''.toast'').toast({
animation: false,
delay: 3000
});
$(''.toast'').toast(''show'');
});
});
</script>
</body>
</html>
Placement of toasts
The toast placement feature is used to set the position of the toast on the webpage. Following are the options available for placement of toasts:
-
.position-absolute – It is used to position the element relative to its closest positioned ancestor.
-
.top-* – sets the position of the top alignment of the toast.
-
.bottom-* – sets the position of the bottom alignment of the toast.
-
.start-* – sets the position of the start alignment of the toast.
-
.end-* – sets the position of the end alignment of the toast.
The values taken by the placement classes range from 0 to 50.
Let us see an example of the placement classes:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
<h4>Placement - Toasts</h4>
<p>Set the position of the toasts on webpage</p>
<!-- Button to trigger the toasts -->
<button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
<!--Top left -->
<div class="toast-container top-0 start-0">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 1</strong>
<small class="text-body-secondary">Toast top left </small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at Top left.
</div>
</div>
</div>
<!--Top center-->
<div class="toast-container top-0 start-50 translate-middle-x">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 2</strong>
<small class="text-body-secondary">Toast at top center</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at Top Center.
</div>
</div>
</div>
<!--Top right -->
<div class="toast-container top-0 end-0">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 3</strong>
<small class="text-body-secondary">Toast at top right</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at Top Right.
</div>
</div>
</div>
<!--Middle left-->
<div class="toast-container top-50 start-0 translate-middle-y">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 4</strong>
<small class="text-body-secondary">Toast at middle left</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at middle left.
</div>
</div>
</div>
<!--Middle left-->
<div class="toast-container top-50 start-50 translate-middle">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 5</strong>
<small class="text-body-secondary">Toast at middle center</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at middle center.
</div>
</div>
</div>
<!--Middle right-->
<div class="toast-container top-50 end-0 translate-middle-y">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 6</strong>
<small class="text-body-secondary">Toast at middle right</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at middle right.
</div>
</div>
</div>
<!--Bottom left-->
<div class="toast-container bottom-0 start-0">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 7</strong>
<small class="text-body-secondary">Toast at bottom left</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at bottom left.
</div>
</div>
</div>
<!--Bottom center-->
<div class="toast-container bottom-0 start-50 translate-middle-x">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 8</strong>
<small class="text-body-secondary">Toast at bottom center</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at bottom center.
</div>
</div>
</div>
<!--Bottom right-->
<div class="toast-container bottom-0 end-0">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 9</strong>
<small class="text-body-secondary">Toast at bottom right</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Position at bottom right.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(''#myBtn'').click(function() {
$(''.toast'').toast({
animation: false,
delay: 3000
});
$(''.toast'').toast(''show'');
});
});
</script>
</body>
</html>
When working with systems that generate many notifications, one after the other, you can use a wrapping element to stack these notifications. Refer the example given below:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts p-0">
<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container top-0 start-0 p-3">
<!-- Toasts within the container -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast 1</strong>
<small class="text-body-secondary">Toast on top</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Toast at the top of the container.
</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast 2</strong>
<small class="text-body-secondary">Second toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Second toast in the stack.
</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast 3</strong>
<small class="text-body-secondary">Third toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Another toast in the stack.
</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Toast 4</strong>
<small class="text-body-secondary">Last toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Fourth toast at the bottom of the stack.
</div>
</div>
</div>
</div>
</body>
</html>
In order to align toasts horizontally and/or vertically, use the flexbox utilties. Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts d-flex">
<!-- Adding a flexbox container for alignment of the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within the flexbox container-->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header bg-danger-subtle">
<strong class="me-auto">Toast within flexbox</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is a toast that is placed within a flexbox container and justified center.
</div>
</div>
</div>
</body>
</html>
Accessibility
In order to make the toasts accessible to the users with screen readers and / or similar assistive technologies, you should wrap the toasts in an aria-live region.
-
Changes to the live regions are automatically identified by the screen readers, without setting the user”s focus.
-
Ensure that the complete toast is identified as a single (atomic) unit, by including aria-atomic=”true”.
-
When the information shown to the user is important, use the alert components rather than toasts.
-
The live region should be present in the markup before the toast is generated or updated.
-
Depending on the content, you need to adapt the role and aria-live attributes; such as:
-
In case of error, use:
role=”alert” aria-live=”assertive”
-
Otherwise, use:
role=”status” aria-live=”polite”
-
-
You must update the delay timeout in order to let the user read the toast, as the content being displayed changes dynamically.
-
A close button must be added to the toast, to allow users to close the toast, when using autohide: false.
Let us see an example:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Toasts</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
<h4>Accessibility - Toasts</h4>
<p>Make the toasts accessible according to the value of role and aria-live</p>
<!-- Button to trigger the toasts -->
<button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 1</strong>
<small class="text-body-secondary">First toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
A toast that is like an alert.
</div>
</div>
</div>
<div role="status" aria-live="polite" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 2</strong>
<small class="text-body-secondary">Second toast</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Toast where role=status and aria-live=polite.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(''#myBtn'').click(function() {
$(''.toast'').toast({
animation: false,
delay: 3000
});
$(''.toast'').toast(''show'');
});
});
</script>
</body>
</html>
”;