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.

Output:

👁 Image

Example 2: They are translucent to match the background and you can stack toasts by wrapping them together using the  .toast-container class.

Output:

👁 Image

References: https://getbootstrap.com/docs/5.0/components/toasts/