Why is the bootstrap badge always the default color?

html twitter-bootstrap badge
Picco picture Picco · Mar 16, 2017 · Viewed 9.6k times · Source

I use the bootstrap badge in my html code and I use this code:

<label for="collaborativa_utenti_pollo"><span class="badge badge-warning">pollo</span><br></label>

The badge must be show with red color but it appears me with default color. Anyone can help me?

Answer

sparta93 picture sparta93 · Mar 16, 2017

Bootstrap v4:

For red color badge, use badge-danger 

<label for="collaborativa_utenti_pollo"><span class="badge badge-danger">pollo</span><br></label>

JSFiddle - https://jsfiddle.net/mearaf9r/

Bootstrap v3

Check here - https://jsfiddle.net/pf66jvfr/

you have to use progress-bar-danger to color the badge.

<label for="collaborativa_utenti_pollo"><span class="badge progress-bar-danger">pollo</span><br></label>

Related questions

vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More
Text-align class for inside a table

Is there a set of classes in Twitter's Bootstrap framework that aligns text? For example, I have some tables with $ totals that I want aligned to the right... <th class="align-right">Total</th> and <td …

Read More
Bootstrap NavBar with left, center or right aligned items

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right? Here is what I've tried so far, and it …

Read More