Bootstrap 4 | Toast

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.

    Classes:

  • .toast: It helps to create a toast
  • .toast-header : It helps to create the toast header
  • .toast-body : It helps to create toast body
  • Example: How To Create a Toast.
    Note: It should be initialized with jQuery. Just select the specified element and call this toast method.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Creating toast</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
    </head>
      
    <body style="text-align:center">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="container mt-3">
            <h3>.toast</h3>
            <p>Click the button to show the toast message.</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('show');
                });
            });
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </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>

    chevron_right

    
    

    Output:

    • .toast(“show”): It shows the toast
    • .toast(“hide”): It hides the toast
    • .toast(“dispose”): It disposes the toast
    • Example:

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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=
          <script src=
        </script>
          <script src=
        </script>
          <script src=
        </script>
      </head>
        
      <body style="text-align: center">
          <h1 style="color: green">GeeksforGeeks</h1>
          <div class="container mt-3">
              <h3>.toast("show"),.toast("hide"),.toast("dispose")</h3>
              <p>Click on the buttons below to perform the actions.</p>
        
              <button type="button" 
                      color="pink"
                      class="btn btn-primary"
                      id="myShowBtn">
                Show Toast
            </button>
              <button type="button" 
                      class="btn btn-danger" 
                      id="myHideBtn">
                Hide Toast
            </button>
              <button type="button" 
                      class="btn btn-warning"
                      id="myDisposeBtn">
                Dispose Toast
            </button>
        
              <div class="toast mt-3"
                   data-autohide="false">
                  <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');
                  });
                  $("#myHideBtn").click(function() {
                      $('.toast').toast('hide');
                  });
                  $("#myDisposeBtn").click(function() {
                      $('.toast').toast('dispose');
                  });
              });
          </script>
        
      </body>
        
      </html>

      chevron_right

      
      

      Output:

    Toast Events:
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        <script src=
      </script>
        <script src=
      </script>
        <script src=
      </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>

    chevron_right

    
    

    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.



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.