Open In App

Bootstrap 5 Toasts Live

Improve
Improve
Like Article
Like
Save
Share
Report

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 .hide in toast live is used to hide the toast which is by default enabled.

Syntax:

<div class="position-fixed bottom-0 end-0 p-3" 
     style="z-index: 11">
     <div id="liveToast" class="toast hide" role="alert">
           <div class="toast-header">
       </div>
           <div class="toast-body">...</div>
     </div>
</div>

Example 1: The following code demonstrates the Toasts Live at the right corner using the Toasts Live Bootstrap 5 properties.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
    </script>
    <script src=
    </script>
    <title>Toasts Live</title>
</head>
  
<body>
    <h1 class="text-success"
        GeeksforGeeks 
    </h1>
    <h2>Bootstrap 5 Toasts Live</h2>
    <button type="button" class="btn btn-primary" 
            id="myBtn">Click Here
    </button>
    <div class="position-fixed bottom-0 end-0">
        <div class="toast hide">
            <div class="toast-header">
                GeeksforGeeks
            </div>
            <div class="toast-body">
                At the right corner of the page.
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#myBtn').click(function () {
                $('.toast').toast({
                    animation: false,
                    delay: 3000
                });
                $('.toast').toast('show');
            });
        });
    </script>
</body>
</html>


Output: 

 

Example 2: The following code demonstrates the Toasts Live at the left corner using the Toasts Live Bootstrap 5 properties.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
    </script>
    <script src=
    </script>
    <title>Toasts Live</title>
</head>
  
<body>
    <h1 class="text-success"
        GeeksforGeeks 
    </h1>
    <h2>Bootstrap 5 Toasts Live</h2>
    <button type="button" class="btn btn-primary" 
            id="myBtn">
        Click Here
    </button>
    <div class="position-fixed bottom-0 end-10">
        <div class="toast hide">
            <div class="toast-header">
                <img src=
                    class="rounded me-2" alt="LOGO" style="width: 40px">
                <strong>GeeksforGeeks</strong>
            </div>
            <div class="toast-body">
                At the left corner of the page.
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#myBtn').click(function () {
                $('.toast').toast({
                    animation: false,
                    delay: 3000
                });
                $('.toast').toast('show');
            });
        });
    </script>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/toasts/#live



Last Updated : 29 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads