The badge class in Bootstrap v4.3.1 is defined as follows:
.badge {
display: inline-block;
padding: 0.25em 0.4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
To change the color of the badge, you can use the following class:
.badge-success {
color: #fff;
background-color: #28a745;
}
However, creating a custom color class like this:
.badge-mine {
color: #212529;
background-color: #808080;
}
may not work as expected when applied to a badge element:
<span class="badge badge-mine">test</span>
Even though it seems similar to the .badge-success class, there may be reasons why it does not produce the desired result.
If any CSS or Bootstrap experts could provide insight into why the badge-mine class behaves differently from badge-success, I would appreciate it.
Thank you!