Open In App

Bootstrap 5 Alerts JavaScript behavior Triggers

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Alert Triggers are used to close an alert. An alert can be closed using a close button inside the alert or by using a button outside the alert with a data-bs-target attribute. It should be noted that closing the alert also removes it from the DOM.

Bootstrap 5 Alert Triggers used attributes:

  • data-bs-dismiss: This attribute is used to make a dismiss button inside the alert.
  • data-bs-target: This attribute is used to make a dismiss button outside the alert.

Syntax:

<div class="alert" role="alert">
    ...
    <button class="btn-close" data-bs-dismiss="alert">
        ...
    </button>
</div>

Return value: This method does not return any value.

Example 1: In this example, we used a close button inside the alert element to close the alert.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <div class="container">
        <div class="mt-4">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Alerts JavaScript 
                Behavior Triggers
            </strong>
        </div>
  
        <div class="alert alert-success mt-4">
            Hello Geek! Welcome to GeeksforGeeks.
            <button class="btn-close ml-5" 
                    data-bs-dismiss="alert">
            </button>
        </div>
  
        <script>
            var allAlerts = document.querySelectorAll('.alert');
            allAlerts.forEach(function (el) {
                new bootstrap.Alert(el);
            });
        </script>
    </div>
</body>
</html>


Output:

 

Example 2: In this example, we used the button that is outside the alert element to close the alert. We used the data-bs-target to target the alert we want to close using the button.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
  
<body>
    <div class="container">
        <div class="mt-4">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <strong>
                Bootstrap 5 Alerts JavaScript 
                Behavior Triggers
            </strong>
        </div>
  
        <div id="gfg" class="alert alert-success mt-4">
            Hello Geek! Welcome to GeeksforGeeks.
        </div>
  
        <button class="btn btn-danger mt-4" 
                data-bs-dismiss="alert" 
                data-bs-target="#gfg">
            Close the Alert
        </button>
  
        <script>
            // Initialize the alerts
            var allAlerts = document.querySelectorAll('.alert');
            allAlerts.forEach(function (el) {
                new bootstrap.Alert(el);
            });
        </script>
    </div>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.2/components/alerts/#triggers



Last Updated : 07 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads