Apply .text-dark for .badge with some .bg-* classes

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;
  }
}

[florianlacreuse]

We don’t use yet BS5 in real development projects but I agree with @theonlypwner, having to specify the color makes the use of badges less simple (imho).

We had already planned to add an override on our side to fix this. @ffoodd Thanks for the idea used in your BS fork (nice project btw), I’ll use it if BS don’t add pairing constraints for color and background-color.

So +1 to not have to add text color css class while using BS badge, background, etc., whatever the solution is.

[florianlacreuse]

With this issue still open, what’s the status of the problem on the Bootstrap team side? For end users, the previous badge color scheme was much simpler. IMHO, for badges we should not have to choose the color of the text.

If there are too many side effects by changing the backgrounds utilities, may be badge-${color} should be reintroduced?