How to Create a Bootstrap Dismissible Alert ?
Last Updated :
08 Aug, 2022
Bootstrap is a free and open-source tool for making responsive and beautiful web pages very easily. Alerts are used to notify the users and the visitors of the webpage about some action or information. Also, we can provide the user with dismissing the alert. But Simple alerts are not so good-looking. So with the help of Bootstrap, we can make really good Alerts inside the content of the webpage, that is inline Alerts and later we will learn how to dismiss them.
Approach: We will first create a div element in our website with some content in it. We need to add the class and role fields as alert. Then the element will work as an Alert. Now, we will create a button to dismiss the alert. We can either create an alert inside the element using the data-dismiss field of the button as alert or outside the container a javascript function. We will learn both the approach in this tutorial. Start by importing the CDN libraries of bootstrap inside the head tags.
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css”> <script src=”https://code.jquery.com/jquery-3.6.0.slim.js”> </script> <script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js”></script>
Example 1: For making the alert dismissible, we need to add alert-dismissible to the class. Now for making the alert dismissible, we need the Javascript library of bootstrap. We have included it for the first time only. Now according to bootstrap, it is better to use a button. We can include the button either inside the alert container or outside. We will call a function in the script file to close the alert container. The script file includes a function. When the user presses the close button, the above function is called and according to our function, the Alert is closed. The above code uses the jQuery library and hence the bootstrap jQuery library is needed for our project.
The ".alert('close')" is a bootstrap function.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<link href="style.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body>
<h2 class="bg-success">GeeksforGeeks</h2>
<h4>Bootstrap Dismissal Alert</h4>
<div class="alert alert-success
alert-dismissible fade show mx-5 mt-4
border border-success" role="alert">
<b>Alert it's GEEKSFORGEEKS</b>
</div>
<button type="button" class="btn bg-warning ml-4"
onclick="onButtonPress()">
Close
</button>
<script src="script.js"></script>
</body>
</html>
|
Javascript
function onButtonPress() {
$('.alert').alert('close')
}
|
Output:
Bootstrap Dismissal Alert
Example 2: In this example, we will use a button and the code is as follows. Here the button should of type=”button” and the class=”close”. We have placed the button inside the div container so that the button will look with the alert and the button is removed as the Alert is dismissed. Here the important thing is the data-dismiss=”alert” because otherwise, it won’t work. When we click the button, the same function is called by bootstrap only that we called in the first example to hide the alert.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GeeksforGeeks</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body>
<h2 class="bg-success">GeeksforGeeks</h2>
<h4>Bootstrap Dismissal Alert</h4>
<div class="alert alert-success
alert-dismissible fade show mx-5 mt-4
border border-success" role="alert">
<b>Alert it's GEEKSFORGEEKS</b>
<button type="button" class="close"
data-dismiss="alert">
<h6>Close</h6>
</button>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...