CODEWITHSUNDEEP
twitter-bootstrapng-bootstrap
Beese
Beese

Reputation: 525

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

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

Upvotes: 12

Views: 54054

Answers (4)

Altamash Bin Tariq
Altamash Bin Tariq

Reputation: 61

if you are using Bootstrap 5 you can add a couple of additional classes: bg-dark & text-white.

Upvotes: 1

Mike Devenney
Mike Devenney

Reputation: 1845

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;
}

Upvotes: 5

Beese
Beese

Reputation: 525

Found a fix, I set the card's (not card-header) background-color to #00AA9E, and then set the card body to white. Probably not the right way to do it but it did the job for me. :)

Upvotes: -2

David
David

Reputation: 6111

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?

Upvotes: 15

Related Questions