Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create dismissible alerts in Bootstrap ?

  • Last Updated : 04 Oct, 2021

Alerts are a very important component in the Bootstrap library. They are used to display any message to the users like a form being submitted, OTP is sent or incorrect input entered in the form. In other words, alerts are used to provide feedback messages to the user based on their interaction with the website.

In this article, we will learn how to create a dismissible alert using the bootstrap library. Dismissible alerts make our website like a modern website where we can dismiss the alert after reading it. We will need to load the alert plugin by including the compiled Bootstrap JavaScript on our HTML page.

We can add the close button and use the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button. On the close button, we use the data-bs-dismiss=”alert” attribute, which triggers the JavaScript functionality. The <button> element is recommended here for proper behavior across all devices. We can use the .fade and .show classes to animate alerts when they are dismissed.

Syntax:

<div class="alert alert-warning alert-dismissible" role="alert">
    <strong>Alert!</strong>This is a dismissable alert
    <button type="button" class="btn-close" 
      data-bs-dismiss="alert"
      aria-label="Close">
    </button>
</div>

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Bootstrap CSS -->
    <link href=
          rel="stylesheet">
      
    <!-- Bootstrap JS -->
    <script src=
    </script>
  </head>
  <body class="container">
    <h1>Dismissible Alert</h1>
    <div class="alert alert-warning 
                alert-dismissible 
                fade show" role="alert">
        <strong>Alert!</strong>
          This is a dismissable
          alert that can be dismissed after
        clicking on the close button.
        <button type="button" class="btn-close" 
                  data-bs-dismiss="alert" 
                  aria-label="Close">
        </button>
    </div>
    <p>This is some page text.</p>
  </body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!