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:https://www.tutorialspoint.com/bootstrap/examples/toast_basic.php
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/[email protected]/dist/css/bootstrap.min.css"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>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:https://www.tutorialspoint.com/bootstrap/examples/toast_live.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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">$(document).ready(function() { $('#liveToast').click(function() {This is a live toast and placed at the bottom of the page. </div></div></div><script>}); }); </script></body></html>$('.toast').toast({ animation: false, delay: 3000 }); $('.toast').toast('show');Translucent toast
Toasts are somewhat translucent and blend with the page on which they appear.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_translucent.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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">$(document).ready(function() { $('#viewToast').click(function() {This is a translucent toast and placed at the top of the page. </div></div></div><script>}); }); </script></body></html>$('.toast').toast({ animation: false, delay: 3000 }); $('.toast').toast('show');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:https://www.tutorialspoint.com/bootstrap/examples/toast_stack.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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">$(document).ready(function() { $('#viewToast').click(function() {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>}); }); </script></body></html>$('.toast').toast({ animation: false, delay: 3000 }); $('.toast').toast('show');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:https://www.tutorialspoint.com/bootstrap/examples/toast_custom_content.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>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:https://www.tutorialspoint.com/bootstrap/examples/toast_color_scheme.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>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:https://www.tutorialspoint.com/bootstrap/examples/toast_placement.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>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:https://www.tutorialspoint.com/bootstrap/examples/toast_wrapping.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>In order to align toasts horizontally and/or vertically, use the flexbox utilties. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_with_flexbox.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>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:https://www.tutorialspoint.com/bootstrap/examples/toast_accessibility.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>
Leave a Reply