Bootstrap 5 Toasts

Last Updated : 03 Feb, 2023

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">GeeksforGeeks</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">GeeksforGeeks</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>