How to Automatically Close Alerts using Twitter Bootstrap ? - GeeksforGeeks

01 Jun, 2020
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
<!DOCTYPE html><html>  <head>    <title>          How to Automatically Close Alerts           using Twitter Bootstrap ?      </title>      <!-- Including Bootstrap CSS -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">      <!-- Including jQuery -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">    </script>      <!-- Including Bootstrap JS -->    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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>
Example 2: In this example, alert is accessed in script using it’s class and alert closes after 2 seconds.
HTML
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">      <!-- Including jQuery -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">    </script>          <!-- Including Bootstrap JS -->    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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>
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
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">      <!-- Including jQuery -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">    </script>      <!-- Including Bootstrap JS -->    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Misc
HTML-Misc
Bootstrap
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to keep gap between columns using Bootstrap?
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 ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?