Open In App

Bootstrap 5 Toasts

Last Updated : 03 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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=
         rel="stylesheet">
    <script src=
    </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=
         rel="stylesheet">
    <script src=
    </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>


Output:

 

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



Previous Article
Next Article

Similar Reads

React-Bootstrap Toasts Component
React-Bootstrap is a front-end framework that was designed keeping react in mind. Toasts Component is a lightweight notification that is designed to provide a way to mimic push notifications from desktop OS or mobile. We can use the following approach in ReactJS to use the react-bootstrap Toasts Component. Toasts Props: animation: It is used to app
2 min read
Bootstrap 5 Toasts Accessibility
Toasts are the basic push notifications sent to the user its similar to the alert box. To create a basic toast we have to use the class name "toast" inside the toast class we can also add the class "toast-header" and add the header for the toast body, the "toast-body" class can be used. We can also use attributes inside the toast class. Bootstrap 5
2 min read
Bootstrap 5 Toasts Methods
Bootstrap 5 Toasts Methods are used to perform some specific tasks on toasts like the show, hide, etc methods. All the methods are mentioned below and described well, for brief clearance about those methods. Toasts are a type of alert box that is used to show a message or an update to the user. For example, submitting a form, clicking a button, or
3 min read
Bootstrap 5 Toasts Translucent
Bootstrap 5 provides the Toasts which are used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. The Toast translucent feature is used to be slightly translucent to blend in with the content below them. Toasts Translucent Classes: toast: This cl
2 min read
Bootstrap 5 Toasts show() Method
Bootstrap 5 Toasts are a type of alert box that is used to show a message or an update to the user. For example, submitting a form, clicking a button, or maybe a push notification inside the website. The alert box type of toast is shown for a couple of seconds. The show() method is used to show the toast when it is triggered. Syntax: toast.show() R
3 min read
Bootstrap 5 Toasts hide() Method
Bootstrap 5 Toasts are a type of alert box that is used to show a message or an update to the user. For example, submitting a form, clicking a button, or maybe a push notification inside the website. The alert box type of toast is shown for a couple of seconds. The hide() method is used to hide the toast from the display. Syntax: toast.hide() Retur
3 min read
Bootstrap 5 Toasts Stacking
Bootstrap 5 Toasts Stacking feature is used to wrap multiple toasts in a toast container which will increase the vertical spacing. Toasts Stacking Classes: No special classes are used in Toasts Stacking, you just need to have knowledge of Bootstrap 5 Toasts. Syntax: &lt;div class="toast-container"&gt; &lt;div class="toast"&gt; &lt;div class="toast-
2 min read
Bootstrap 5 Toasts Custom content
Bootstrap 5 Toasts Custom content is used to add your own markup by removing sub-components. Users can easily Customize toasts by adding their own content or by adding other bootstrap components inside toast. There are no predefined classes for toast custom content. You can custom-create them by giving additional controls and adding components like
2 min read
Bootstrap 5 Toasts Live
Bootstrap 5 Toasts Live is used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. The Toasts Live feature is used to show a toast in the lower corners of the web page. Toasts Live Classes: No special classes are used in Toasts Live. The usage of
2 min read
Bootstrap 5 Toasts Options
Bootstrap 5 Toasts Options available a few features like enable/disable, auto-hide, etc. A toast is used to create something like an alert box that is only shown for a couple of seconds when something happens. When the user clicks on a button, submits a form, etc. then a lightweight and easily customizable alert message is shown for a few seconds.
2 min read