Bootstrap 5 Alerts JavaScript Behavior Methods

Last Updated : 30 Jul, 2024

Bootstrap 5 Alerts methods that are used to control the visibility of the alert component. For example, these methods can be used to close or dispose of an alert component. It is useful for displaying popup messages or user action notifications on a webpage.

Bootstrap 5 Alerts Methods

close(): It is used to close and hide the alert by removing it from the DOM.
dispose(): It is used to destroy the element as a Bootstrap 5 alert element.
getInstance(): It is a static method that is used to get the alert element associated with the DOM.
getOrCreateInstance(): It is a static method that is used to get the alert element associated with the DOM or create a new one if it is not present.

Syntax:

alertElement.alert_method()

Example 1: In this example, we will close an alert component using the "close" method given by the Bootstrap 5 alert object.

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 href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"            rel="stylesheet"           integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"            crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"              integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"             crossorigin="anonymous">     </script> </head>    <body class="m-2">     <h1 class="text-success">GeeksforGeeks</h1>     <div class="alert alert-success" id="alert">         A GFG Alert!     </div>      <button id="closeBtn">Close GFG Alert</button>      <script>         const alert = document.getElementById('alert')         const alertEl = new bootstrap.Alert(alert)          const closeBtn = document.getElementById('closeBtn')          closeBtn.addEventListener('click', function() {           alertEl.close()         })     </script> </body>    </html>

Output:

bootstrapImprove1 — Bootstrap 5 Alerts JavaScript Behavior Methods

Example 2: In this example, we will dispose of the alert element using the "dispose" method given by the Bootstrap 5 alert object. Once we dispose of an alert element, we cannot use any methods given by the Bootstrap 5 alert object as it gets destroyed in the DOM.

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 href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"            rel="stylesheet"           integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"            crossorigin="anonymous">     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"              integrity= "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"             crossorigin="anonymous">     </script> </head>    <body class="m-2">     <h1 class="text-success">GeeksforGeeks</h1>     <h3>Bootstrap 5 Alert Methods</h3>     <div class="alert alert-success" id="alert">         A GFG Alert!     </div>      <button id="closeBtn">Close GFG Alert</button>     <button id="disposeBtn">Dispose GFG Alert</button>      <script>         const alert = document.getElementById('alert')         const alertEl = new bootstrap.Alert(alert)          const closeBtn = document.getElementById('closeBtn')         const disposeBtn = document.getElementById('disposeBtn')          closeBtn.addEventListener('click', function() {           alertEl.close()         })          disposeBtn.addEventListener('click', function() {           alertEl.dispose()           console.log('alert disposed!');         })     </script> </body>    </html>

Output:

bootstrapImprove2 — Bootstrap 5 Alerts JavaScript Behavior Methods

Reference: https://getbootstrap.com/docs/5.0/components/alerts/#methods

Bootstrap 5 Alerts JavaScript behavior Events

dishebhbhayana

Improve

Article Tags :

Bootstrap 5 Alerts JavaScript Behavior Methods

Bootstrap 5 Alerts Methods

Syntax:

Similar Reads