3 min readJan 8, 2021
In this article, we will see how we can make Dismissible Alerts in Bootstrap and how we can remove extra right margin that comes with .alert-dismissible class
Simple Dismissible Alert: The .alert. and .alert-dismissible classes are used to create simple Bootstrap Dismissible Alert. These classes are used with <div> tag.
Syntax:
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<strong>Medium</strong> It is a platform to learn programming.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>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=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"><title>How to Remove extra right margin when using alert-dismissible</title><style>h5 {color: Green;margin-bottom: 5%;}h5,.alert {margin-top: 5%;}body {text-align: center;margin-top: 20%;}.alert-dismissible {/* padding-right: 0; */}</style></head><body><div class=”container”><h5>How to Remove extra right margin when using alert-dismissible?</h5><div class=”alert alert-primary alert-dismissible fade show” role=”alert”><strong>Hello </strong>How to Remove extra right margin when using alert-dismissible ??????????<button type=”button” class=”close” data-dismiss=”alert” aria-label=”Close”><span aria-hidden=”true”>×</span></button></div></div><script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script></body></html>
Output:
Notice the extra right margin which comes with .alert-dismissible class in the above image. Let’s see how we can remove it.
We can remove this margin by setting right padding of alert-dissmisible div to zero
.alert-dismissible {
padding-right: 0;
}Example of Dismissible Alert with no extra right margin:
<!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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"><title>How to Remove extra right margin when using alert-dismissible</title><style>h5 {color: Green;margin-bottom: 5%;}h5,.alert {margin-top: 5%;}body {text-align: center;margin-top: 20%;}.alert-dismissible {padding-right: 0;}</style></head><body><div class=”container”><h5>How to Remove extra right margin when using alert-dismissible?</h5><div class=”alert alert-primary alert-dismissible fade show” role=”alert”><strong>Hello </strong>How to Remove extra right margin when using alert-dismissible ??????????<button type=”button” class=”close” data-dismiss=”alert” aria-label=”Close”><span aria-hidden=”true”>×</span></button></div></div><script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script></body></html>
Output:
