Apply .text-dark for .badge with some .bg-* classes
Created by: theonlypwner
In Bootstrap 4, class="badge badge-light"
was enough, but in Bootstrap 5, it's class="badge bg-light text-dark"
. This is less convenient when switching between badge bg-dark
and badge bg-light
, since text-dark
also has to be added or removed.
Bootstrap 5 should apply the styles for text-dark
to .badge.bg-light
and .badge.bg-warning
. The Bootstrap 5 docs also recommend text-dark
for bg-info
, but I find that one is not necessary.
One workaround is to add this to our SCSS files, which is what Bootswatch does:
@import "~bootstrap/scss/bootstrap";
.badge {
&.bg-warning,
&.bg-info, /* optional */
&.bg-light {
@extend .text-dark;
}
}