Bootstrap 5 Alerts Dismissing

Last Updated : 07 Mar, 2023

Bootstrap 5 Alerts Dismissing provides a feature to dismiss the alerts inline and to enable alerts dismissing we need to add the .alert-dismissible class to the alert, and the data-bs-dismiss=”alert” attribute to the close button.

Syntax:

<div class="alert alert-dismissible">
    <button type="button" class="btn-close" 
            data-bs-dismiss="alert">
    </button>
</div>

Bootstrap 5 Alerts Dismissing Classes:

alert-dismissible: This class is used to signify that a specific alert has dismissing capabilities.

Bootstrap 5 Alerts Data Attributes:

data-bs-alert: This is the compulsory data attribute for the dismissing alert and this is needed to be added to the button which will be used to dismiss the alert. Ti necessarily needs the “alert” as its value.

Example 1: This code example shows how to create an alert with a link dismissable:

HTML

<!doctype html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body class="m-3">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4>Bootstrap 5 Alerts Dismissing</h4>
    <div class="container"
         id="navbarToggleExternalContent">
        <div class="alert alert-success 
                    alert-dismissible fade show" 
             role="alert">
            This is a simple success alert. Go to
            <a href=
"https://www.geeksforgeeks.org/bootstrap-5-alerts/"
               class="alert-link">
                this link
            </a>to learn basics of bootstrap alerts.
            <button type="button" class="btn-close"
                    data-bs-dismiss="alert"
                    aria-label="Close">
            </button>
        </div>
        <p> 
              Above is this Dismissing Alert which
            is in success color. <br>
            It gets dismissed when the close button 
              is clicked.
        </p>
    </div>
</body>
</html>

Output:

Bootstrap 5 Alerts Dismissing

Example 2: This code example demonstrates how we can trigger an alert from a button and we can add dismissal to it:

HTML

<!doctype html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body class="m-3">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4>Bootstrap 5 Alerts Dismissing</h4>
    <button id="trigger-btn"
            class="btn btn-success ms-4">
        Click on this button <br>
        To see dismissing alert
    </button>
    <div class="container mt-3" id="main-container">
        <p>
              This text will disappear when the button is clicked.
            <br> It will be replaced by a simple alert.
        </p>
    </div>
    <script>
        let container = document.getElementById("main-container");
        let button = document.getElementById("trigger-btn");
        if(button == null){
            console.log("Clicked");
        }
        button.addEventListener("click", () => {
            container.innerHTML =
                `<div class="alert alert-success 
                    alert-dismissible fade show" role="alert">
                    This is a simple succes alert. Go to <a href=
        "https://www.geeksforgeeks.org/bootstrap-5-alerts/" class="alert-link">
                    this link</a> to learn basics of bootstrap alerts.
                    <button type="button" class="btn-close"
                        data-bs-dismiss="alert" aria-label="Close">
                    </button>
                </div>`
            ;
        });     
    </script>
</body>
</html>