By using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
- Make sure, you have loaded the alert plugin, or the compiled Bootstrap JavaScript.
- It requires util.js , if you are building JavaScript from source. The compiled version includes this.
- We can add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
- On the dismiss button, add the data-dismiss=”alert” attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
- You can add the .fade and .show classes to animate alerts when dismissing them.
Example:
<!doctype html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 , shrink-to-fit = no ">
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href =
integrity =
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" >
<!-- JavaScript Plugins -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
integrity =
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "anonymous" >
</ script >
< title >
How to Remove extra right margin
when using alert-dismissible?
</ title >
</ head >
< body >
< div class = "container" >
< a class = "navbar-brand text-success" href = "#" >
Geeksforgeeks
</ a >
< div class="alert alert-warning alert-dismissible
fade show" role = "alert" >
< b >Hello Everyone!</ b >
click on 'x' symbol to close
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" >×</ span >
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output:
Using JavaScript triggers: Enable dismissal of an alert via JavaScript:
$('.alert').alert()
Or with data attributes on a button within the alert, as demonstrated above:
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button>
Note that closing an alert will remove it from the DOM.
Example:
<!DOCTYPE html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 , shrink-to-fit = no ">
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href =
integrity =
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" >
<!-- JavaScript Plugins -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
integrity =
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "anonymous" >
</ script >
< style type = "text/css" >
.fade {
-webkit-transition-duration: 7s;
/* Safari */
transition-duration: 7s;
}
</ style >
</ head >
< body >
< div class = "container" >
< a class = "navbar-brand text-success"
href = "#" >
Geeksforgeeks
</ a >
< h2 >
Alert dismiss using
javascript trigger
</ h2 >
< div class = "alert alert-warning fade show" >
< b >Hello Everyone!</ b >
click on 'x' symbol to close
</ div >
</ div >
<!-- JavaScript trigger-->
< script >
$(document).ready(function () {
$(".alert").alert('close');
});
</ script >
</ body >
</ html >
|
Output:
Note: After 7 seconds alert will dismiss automatically.
Alert-dismissible: The alert–dismissible class adds extra padding to the right of the alert and positions the .close button. On the dismiss button, add the data-dismiss=”alert” attribute, which triggers the JavaScript functionality. Be sure to use the element with it for proper behavior across all devices.
How to remove extra right margin when using alert-dismissible?
Example:
<!doctype html> < html lang = "en" >
< head >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 , shrink-to-fit = no ">
<!-- Bootstrap CSS -->
< link rel = "stylesheet" href =
integrity =
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" >
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
integrity =
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "anonymous" >
</ script >
< title >
Remove extra right margin
using alert-dismissible
</ title >
< style type = "text/css" >
.alert-dismissible {
margin-right: 100px;
/* Reset pixel value */
padding-right: 0px;
}
</ style >
</ head >
< body >
< div class = "container" >
< a class = "navbar-brand text-success" href = "#" >
Geeksforgeeks
</ a >
< div class="alert alert-warning alert-dismissible
fade show" role = "alert" >
< b >Hello Everyone!</ b >
click on 'x' symbol to close
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" >×</ span >
</ button >
</ div >
</ div >
</ body >
</ html >
|
Output: