Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Automatically Close Alerts Using Twitter Bootstrap
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.
2K+ Views
