Bootstrap 4 badge not working - just not showing up

Question

I'm trying to use bootstrap 4 badge in this way:

<td><span class="badge badge-warning">{{ object.get_type_display }}</span></td>

I'm using:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css

What can be a reason?

Answer 1

At least in Bootstrap version 5.1.x the badges work again after they were dropped in v4.

You can use the following code to display a badge next to a heading:

<h1>Example heading <span class="badge bg-secondary">New</span></h1>

Buttons, background colors and pill badges are now supported as well. You can find the documentation here: https://getbootstrap.com/docs/5.1/components/badge/

Answer 2

.badge was dropped in the v4:

Dropped the .badge component as it was nearly identical to labels/tags. Use the .tag-pill modifier together with the label component instead for that rounded look.

But they returned it (git issue) so use the latest version - v4.0.0-alpha.6