Bootstrap 5 Alerts JavaScript behavior Triggers
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div class = "mt-4" > < h1 class = "text-success" > w3wiki </ h1 > < strong > Bootstrap 5 Alerts JavaScript Behavior Triggers </ strong > </ div > < div class = "alert alert-success mt-4" > Hello Geek! Welcome to w3wiki. < 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container" > < div class = "mt-4" > < h1 class = "text-success" > w3wiki </ h1 > < strong > Bootstrap 5 Alerts JavaScript Behavior Triggers </ strong > </ div > < div id = "gfg" class = "alert alert-success mt-4" > Hello Geek! Welcome to w3wiki. </ 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
Contact Us