Bootstrap 5 Toasts
Bootstrap 5 Toasts are notifications or messages which the users receive whenever they perform certain actions. They can easily be customized.
- Overview: Toasts need to be initialized. Apply autohide: false so that the toasts don’t automatically hide.
- Placement: You can place toasts as you want. The top right and top middle positions are often used for notifications.
- Accessibility: To avoid small interruptions caused by toasts to the users, we should wrap toasts in an aria-live region. Changes to live regions are announced automatically by screen readers. We can set the aria-live=“assertive” for the important messages and role=”status”, and aria-live=”polite” for the normal message.
- Sass variables: They have a pre-defined list of variables that can be changed as per usage.
- Usage: It uses JavaScript to initialize toasts.
var toastElementList = [].slice.call(document.querySelectorAll('.toast')) var toastList = toastElementList.map(function (toastEl) { return new bootstrap.Toast(toastEl, option) })
- Events: Below is the list of event types and its description.
- show.bs.toast: It fires when the show instance method is called.
- shown.bs.toast: It fires when the toast is visible to the user.
- hide.bs.toast: It fires when the hide instance method is called.
- hidden.bs.toast: It fires when toast has finished being hidden from the user.
Syntax:
<div class="toast show"> <div class="toast-header"> <strong class="me-auto">...</strong> <button type="button" class="btn-close" data-bs-dismiss="toast"> ... </button> </div> <div class="toast-body"> <p>...</p> </div> </div>
Example 1: It is a basic toast. They are as flexible as you need and require very little markup.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < 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.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "m-3" > < div class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h2 >Bootstrap 5 Toasts</ h2 > </ div > < br >< br > < div class = "toast show" > < div class = "toast-header" > < strong class = "me-auto" >GFG</ strong > < small >5 mins ago</ small > < button type = "button" class = "btn-close" data-bs-dismiss = "toast" > </ button > </ div > < div class = "toast-body" > < p >Hackathon at 9pm</ p > </ div > </ div > </ body > </ html > |
Output:
Example 2: They are translucent to match the background and you can stack toasts by wrapping them together using the .toast-container class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < 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.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "m-3" > < div style = "height:100vh;" > < div class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h2 style = "color:white;" > Bootstrap 5 Toasts </ h2 > </ div > < br >< br > < div class = "toast-container" > < div class = "toast show" > < div class = "toast-header" > < strong class = "me-auto" > GFG</ strong > < small >just now</ small > < button type = "button" class = "btn-close" data-bs-dismiss = "toast" > </ button > </ div > < div class = "toast-body" > < p >Time to practice some DSA</ p > </ div > </ div > < div class = "toast show" > < div class = "toast-header" > < strong class = "me-auto" >GFG</ strong > < small >5 mins ago</ small > < button type = "button" class = "btn-close" data-bs-dismiss = "toast" > </ button > </ div > < div class = "toast-body" > < p >Hackathon at 9pm</ p > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
References: https://getbootstrap.com/docs/5.0/components/toasts/