How to Create a Bootstrap Dismissible Alert ? - GeeksforGeeks

30 Sep, 2021
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 dismissable, we need to add alert-dismissible to the class. Now for making the alert dismissable, 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="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></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="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></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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Questions
HTML-Questions
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property