title: Changing color of a bootstrap card header
body: <p>I have in my application a bootstrap card with a header, which looks like this:
  <a href="https://i.stack.imgur.com/Lv1jk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lv1jk.png" alt="card" /></a></p>
  <p>As a code I used:</p>
  <pre><code>&lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-header card-header-warning&quot;&gt;
             &lt;h4 class=&quot;card-title&quot;&gt;Blah blah&lt;/h4&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;card-body&quot;&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But I don't want to use the in bootstrap defined colors (like primary, warning, success...), I want to use other colors like cyan or bordeaux (in GRB fromat or HEX, just not bootstrap).</p>
  <p>How may I implement this?
  I tried with defining an ID in the div like this:</p>
  <pre><code>&lt;div class=&quot;card-header card-header-warning&quot; id=&quot;card-header-color&quot;&gt;
  </code></pre>
  <p>And in my css I had:</p>
  <pre><code>#card-header-color {
     background-color: cyan;
  }
  </code></pre>
  <p>But nothing has changed.</p>
  <p>Then I deleted the &quot;card-header-warning&quot; part, but then the styling was also gone (look at the picture), so I just need a way to change the color, without having to style the header again.
  <a href="https://i.stack.imgur.com/LgKxc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LgKxc.png" alt="card-2" /></a></p>
  <p>I'd be really happy, if you could help me.</p>