Bootstrap 5 Alerts JavaScript behavior

Last Updated : 25 Jan, 2023

Bootstrap 5 Alerts JavaScript behavior provides to enable the dismissal of an alert when an action is triggered. In addition to this, alert instances can be created with the help of the alert constructor. Although, there are a few events that enable the alert functionality by implementing Bootstrap’s alert plugin.

Bootstrap 5 Alerts JavaScript Behavior:

Trigger: This component helps to create the dismissible alerts by using bootstrap alerts Enable dismissal for an alert component via Java Script.
Methods: Methods are the function that adds more functionalities to our Bootstrap alert. There are Some methods like close, dispose, getInstance, and getOrCreateInstance.
Events: This component enables a few alert functionality events by implementing Bootstrap’s alert plugins.

Example 1: This example describes the basic usage of the Bootstrap 5 Alerts JavaScript behavior.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, 
                         initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
 
</head>
 
<body class="text-center mt-3">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h3>Bootstrap Alert javascript behavior</h3>
     
    <div id="AlertDiv"></div>
     
    <button type="button"
            class="btn btn-primary btn-lg"
            id="AlertBtn">
        Click me to show alert
    </button>
     
    <script type="text/javascript">
        const alertPlaceholder = 
            document.getElementById('AlertDiv')
        const alert = (message, type) => {
         const wrapper = document.createElement('div')
         wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
           `<div>${message}</div>`,
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
           '</div>'
         ].join('')
         
         alertPlaceholder.append(wrapper)
        }
         
        const alertTrigger = document.getElementById('AlertBtn')
        if (alertTrigger) {
         alertTrigger.addEventListener('click', () => {
          alert('Bootstrap 5 Alert message triggered', 'danger')
         })
        }
    </script>
</body>
 
</html>

Output:

Example 2: In this example, we have demonstrated Bootstrap 5 Alerts JavaScript behavior by clicking the close 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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container">
        <div class="mt-4">
            <h1 class="text-success">
                GeeksforGeeks
            </h1>
            <h3>
                Bootstrap 5 Alerts JavaScript behavior
            </h3>
        </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:

Reference: https://getbootstrap.com/docs/5.0/components/alerts/#javascript-behavior

Bootstrap 5 Alerts JavaScript behavior Triggers

jayadeepreddypeddireddy

Improve

Article Tags :

Bootstrap 5 Alerts JavaScript behavior

HTML

HTML

Similar Reads