Why is the bootstrap badge always the default color?

Question

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 1

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>

Answer 2

Use the following code to make a badge with bootstrap warning background:

<span class="badge bg-danger">pollo</span>

bg-danger class can be used to set danger the background color. In bootstrap's documentation there is no class mentioned as badge-danger.