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 =
< 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
Share your thoughts in the comments
Please Login to comment...