Open In App

How to create dismissible alerts in Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 being 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 dismissible alert
    <button type="button" class="btn-close" 
      data-bs-dismiss="alert"
      aria-label="Close">
    </button>
</div>

Example: In this example, we will add a .alert-dismissible class of Bootstrap.

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 dismissible
        alert that can be dismissed after
        clicking on the close button.
        <button type="button"
                class="btn-close"
                ata-bs-dismiss="alert"
                aria-label="Close">
        </button>
    </div>
 
    <p>This is some page text.</p>
 
</body>
</html>


Output:



Last Updated : 17 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads