Bootstrap 4 | Toast - GeeksforGeeks

04 May, 2022
Toast is used to create something like an alert box which is shown for a short time like a couple of seconds when something happens. Like when the user clicks on a button or submits a form and many other actions.
.toast: It helps to create a toast
.toast-header : It helps to create the toast header
.toast-body : It helps to create toast body
Toast Methods:
.toast(options): It helps to activate the toast with a parameter of option. In the below implementation we remove the fading transition effect from the toast, and we delay the hiding of the toast to 8000 milliseconds when it is shown. It has three options animation, autohide, delay. Refer this link for more information on these options.Example:  
HTML
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Example</title>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align: center">    <h1 style="color:green">GeeksforGeeks</h1>    <div class="container mt-3">        <h3>.toast(options)</h3>         <p>            When we click the button below there            would be delay of the toast to 8000            milliseconds.        </p>         <button type="button" class="btn btn-primary"            id="myBtn">Show Toast</button>        <div class="toast mt-3">            <div class="toast-header">                Toast Header            </div>            <div class="toast-body">                Some text inside the toast body            </div>        </div>    </div>    <script>        $(document).ready(function () {            $('#myBtn').click(function () {                $('.toast').toast({                    animation: false,                    delay: 2000                });                $('.toast').toast('show');            });        });    </script></body></html>
Output:  
 
.toast(“show”): It shows the toast
.toast(“hide”): It hides the toast
.toast(“dispose”): It disposes the toast
Toast Events: Example:  
HTML
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Example</title>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body style="text-align:center">    <h1 style="color:green">GeeksforGeeks</h1>    <div class="container mt-3">        <h3>Toast Events</h3>        <strong>show.bs.toast, </strong>        <strong>shown.bs.toast, </strong>        <strong>hide.bs.toast, </strong>        <strong>hidden.bs.toast </strong>         <p>Click on the button below to perform toast.</p>         <button type="button" class="btn btn-primary"            id="myShowBtn">            Show Toast        </button>        <div class="toast mt-3">            <div class="toast-header">                Toast Header            </div>            <div class="toast-body">                Some text inside the toast body            </div>        </div>    </div>    <script>        $(document).ready(function () {            $("#myShowBtn").click(function () {                $('.toast').toast('show');            });            $('.toast').on('show.bs.toast', function () {                alert('The toast is about to be shown.');            });            $('.toast').on('shown.bs.toast', function () {                alert('The toast is now fully shown.');            });            $('.toast').on('hide.bs.toast', function () {                alert('The toast is about to be hidden.');            });            $('.toast').on('hidden.bs.toast', function () {                alert('The toast is now hidden.');            });        });    </script></body></html>
Output:  
show.bs.toast : It happens when the toast is about to be shown.  
shown.bs.toast : It happens when the toast is shown.  
hide.bs.toast : It happens when the toast is about to be hidden.  
hidden.bs.toast : It happens when the toast is fully hidden.  
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ysachin2314
sahilintern
Bootstrap-4
Bootstrap
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property