Bootstrap success icon showing white on white instead of green?

user_11846808 0
Viewed 230

I copied the code directly from the bootstrap docs (below) but for some reason my "success" badge is showing as white text on a white background? I can highlight the text and it's "there" but it's not showing like it should.

Code from bootstrap:

<span class="badge badge-success">Success</span>

Code from my page:

<h5 class="card-title mb-2"><%= title %> <span class="badge badge-success">Success</span>
    </h5>

Any idea why it's not working properly?

bootstrap-4 ejs css html javascript
1 Answers

The correct thing is badge bg-success if you use bootstrap 5

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<h5 class="card-title mb-2">
<%= title %>
<span class="badge bg-success">Success</span>
 </h5>
    
<span class="badge bg-success">Success</span>

Most likely, you are using bootstrap 5 in your project and that is why it appears blank. If you used bootstrap 4 your code would work.

Bootstrap 5 badge

user_143476170
Related