How to change the background-color of a Bootstrap card-header?

Question

I'm trying to change the background-color of a bootstrap card-header, but when I add background-color: #00AA9E it seems to somehow destroy the look of the header..? Has anyone ever seen this before? Does it have something to do with the fact that the card is nested? Is it a bug in bootstrap?

Before background-color: #00AA9E

After background-color: #00AA9E

Answer 1

First off, since you're setting the font-color to white, just use the text-white class.

However, I do not have the same issue whenever I use this code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="card">
    <div class="card-header text-white" style="background-color: #00AA9E;">
      Featured
    </div>
    <div class="card-body">
      <h4 class="card-title">Special title treatment</h4>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

Is there something else that could be affecting the style that you aren't showing us?

Answer 2

I know it's years later, but I figured I'd add my answer since the accepted answer is a roundabout way of doing this and there is a more straightforward way to do it. Applying !important to the setting(s) in your css class will cause them to override all settings set in another css class on the same element. Hope this helps someone.

.ph-card-header { color: white !important; background-color: navy !important; }