How to Automatically Close Alerts using Twitter Bootstrap ?

All modern web application uses alerts to show messages to the user. These alerts have a close button to close them or can be closed automatically using Twitter Bootstrap. In this post, we will create automatically closing of alerts using twitter Bootstrap.

Basic idea is to use jQuery setTimeout() method to close the alert after specified time.

Syntax:

setTimeout(function, delay)

Note: Delay is defined in milliseconds. 1 second is equal to 1000 milliseconds.

Example 1: In this example, alert is accessed in script using the id and then alert is closed after 5 seconds.



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
          How to Automatically Close Alerts 
          using Twitter Bootstrap ?
      </title>
  
    <!-- Including Bootstrap CSS -->
    <link rel="stylesheet" href=
  
    <!-- Including jQuery -->
    <script src=
    </script>
  
    <!-- Including Bootstrap JS -->
    <script src=
    </script>
</head>
  
<body>
    <h3>Automatically closing the alert</h3>
  
    <!-- Showing alert -->
    <div id="alert" class="alert alert-danger">
        This alert will automatically 
        close in 5 seconds.
    </div>
  
    <script type="text/javascript">
        setTimeout(function () {
  
            // Closing the alert
            $('#alert').alert('close');
        }, 5000);
    </script>
</body>
  
</html>

chevron_right




Example 2: In this example, alert is accessed in script using it’s class and alert closes after 2 seconds.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
    <title>
          How to Automatically Close Alerts 
          using Twitter Bootstrap ?
    </title>
  
    <!-- Including Bootstrap CSS -->
    <link rel="stylesheet" href=
  
    <!-- Including jQuery -->
    <script src=
    </script>
      
    <!-- Including Bootstrap JS -->
    <script src=
    </script>
</head>
  
<body>
    <h3>Automatically closing the alert</h3>
      
    <!-- Showing alert -->
    <div class="alert alert-danger">
        This alert will automatically 
        close in 2 seconds.
    </div>
  
    <script type="text/javascript">
        setTimeout(function () {
  
            // Closing the alert
            $('.alert').alert('close');
        }, 2000);
    </script>
</body>
  
</html>

chevron_right



Example 3: In this example, bootstrap hide class is dynamically added to alert to close the alert after 5 seconds. The addClass() is the method that is used to add class to any element using JavaScript.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
  
    <title>
        How to Automatically Close Alerts
        using Twitter Bootstrap ?
    </title>
  
    <!-- Including Bootstrap CSS -->
    <link rel="stylesheet" href=
  
    <!-- Including jQuery -->
    <script src=
    </script>
  
    <!-- Including Bootstrap JS -->
    <script src=
    </script>
</head>
  
<body>
    <h3>Automatically closing the alert</h3>
  
    <!-- Showing alert -->
    <div id="alert" class="alert alert-danger">
        This alert will automatically 
        close in 5 seconds.
    </div>
  
    <script type="text/javascript">
        setTimeout(function () {
  
            // Adding the class dynamically
            $('#alert').addClass('hide');
        }, 5000);
    </script>
</body>
  
</html>

chevron_right


Output:


full-stack-img




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.