How to Automatically Close Alerts using Twitter Bootstrap?

Bootstrap Web Development Front End Technology

We can automatically close the Bootstrap Alert component by using the “close” method and “hide” class provided by Twitter bootstrap. Twitter Bootstrap Alert component is used to display an alert with a message to the user, often in response to a user action or an event.

Approach 1: Using Close Method

In this approach, we will use the “close” method provided by bootstrap to close the component, and we will use the setTimeout() browser API to achieve this after 5 seconds.

Syntax

$(alertComponent).alert(‘close’)

Here, “alertComponent” is the Bootstrap Alert component, and we are calling the “close” method on this component.

Example

In this example, we will automatically close the Alert component after 5 seconds using the “close” method, provided by bootstrap, and the setTimeout() browser API.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatically Close Alerts using Twitter Bootstrap?</title>
   <link rel="stylesheet" href=
   "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <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>How to Automatically Close Alerts using Twitter Bootstrap?</h3>
   <div id="alert" class="alert alert-success">
   This alert will automatically close in 5 seconds.
   </div>
   <script>
      const alert = document.getElementById('alert');
      setTimeout(() => {
         $('#alert').alert('close')
      }, 5000)
   </script>
</body>
</html>

Approach 2: Using Hide Class

In this approach, we will add a “hide” class to the Alert component to automatically close the Alert, and we will use the setTimeout() browser API to achieve this after 5 seconds.

Syntax

$(alertComponent).addClass(hide’)

Here, “alertComponent” is the Bootstrap Alert component, and we are adding the “hide” class on this component.

Example

In this example, we will automatically close the Alert component after 5 seconds using the “hide” class, provided by bootstrap, and the setTimeout() browser API.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatically Close Alerts using Twitter Bootstrap?</title>
   <link rel="stylesheet" href=
   "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
   <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>How to Automatically Close Alerts using Twitter Bootstrap?</h3>
   <div id="alert" class="alert alert-success">
      This alert will automatically close in 5 seconds.
   </div>
   <script>
      const alert = document.getElementById('alert');
      setTimeout(() => {
         $('#alert').addClass('hide')
      }, 5000)
   </script>
</body>
</html>

Conclusion

In this article, we learned how to automatically close an Alert component using Twitter Bootstrap using two different approaches. In the first approach, we used the “close” method, and in the second approach, we used the “hide” class provided by bootstrap.