title: Why cant we change the color of badge class in bootstrap 4 using css?
body: <p>The class for badge in Bootstrap v4.3.1 is</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>and to change its color we can add the following class</p>
  
  <pre><code>.badge-success {
     color: #fff;
     background-color: #28a745;
  }
  </code></pre>
  
  <p>Logic would say, if I wanted to make my own color I could make a new class in my css file like such</p>
  
  <pre><code>.badge-mine {
     color: #212529;
     background-color: #808080;
  }
  </code></pre>
  
  <p>and it should work when this works...</p>
  
  <pre><code>&lt;span class="badge badge-success"&gt;test&lt;/span&gt;
  </code></pre>
  
  <p>then this should work too, but it does not work, even though they appear the same.</p>
  
  <pre><code>&lt;span class="badge badge-mine"&gt;test&lt;/span&gt;
  </code></pre>
  
  <p>I have checked many answers, but no one seems to answer why we cannot do it like this. Although, I am no expert in CSS I understand that the last command overwrites the previous one i.e. this should overwrite</p>
  
  <pre><code>color: #212529;
  background-color: #808080;
  </code></pre>
  
  <p>this</p>
  
  <pre><code>color: #fff;
  background-color: #28a745;
  </code></pre>
  
  <p>but for some reason it is not happening here. </p>
  
  <p>Can some bootstrap 4 expert shed some light on why the badge-mine does not work even though it looks almost exactly like badge-success?</p>
  
  <p>Thanks</p>