How to Remove extra right margin when using alert-dismissible ?
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:
HTML
<!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 = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" > <!-- JavaScript Plugins --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> < script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" > </ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 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 = "#" > w3wiki </ 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:
HTML
<!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 = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" > <!-- JavaScript Plugins --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> < script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" > </ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 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 = "#" > w3wiki </ 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:
HTML
<!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 = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" > <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> < script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" > </ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 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 = "#" > w3wiki </ 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: