title: bootstrap 4 change color of nav-pill active
body: <p>I can assign custom background color for each of the pills, but what I really would like is to have a faded color of each custom one (which is just a matter of changing the values in the above), and have the active color match that full color of corresponding pill.</p>
  
  <ul>
  <li>pill one > faded red</li>
  <li>pill two > faded blu</li>
  <li>pill three > faded black</li>
  </ul>
  
  <p>When</p>
  
  <ul>
  <li>pill one active > red</li>
  <li>pill two active > blu</li>
  <li>pill three active > black</li>
  </ul>
  
  <p>my code</p>
  
  <pre><code>&lt;ul class="nav nav-pills"&gt;
    &lt;li class="nav-item pill-1"&gt;
      &lt;a class="nav-link active" href="#"&gt;pill one&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item pill-2"&gt;
      &lt;a class="nav-link" href="#"&gt;pill two&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item pill-3"&gt;
      &lt;a class="nav-link" href="#"&gt;pill three&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.pill-1 a {
      background-color: rgba(255, 0, 0, 0.5);
  }
  </code></pre>
  
  <p>bootstrap override</p>
  
  <pre><code>.nav-pills .nav-link.active, .nav-pills .show &gt; .nav-link {
      color: #fff;
      background-color: #d9d9d9;
  }
  </code></pre>