How to override Bootstrap's Panel heading background color?

Solution 1:

This should work:

.panel > .panel-heading {
    background-image: none;
    background-color: red;
    color: white;

}

Solution 2:

You can create a custom class for your panel heading. Using this css class you can style the panel heading. I have a simple Fiddle for this.

HTML:

<div class="panel panel-default">
   <div class="panel-heading panel-heading-custom">
       <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
       Panel content
   </div>
</div>

CSS:

.panel-default > .panel-heading-custom {
background: #ff0000; color: #fff; }

Demo Link:

http://jsfiddle.net/kiranvarthi/t1Lq966k/

Solution 3:

How about creating your own Custom Panel class? That way you won't have to worry about overriding Bootstrap.

HTML

<div class="panel panel-custom-horrible-red">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      Panel content
    </div>
</div>

CSS

.panel-custom-horrible-red {
    border-color: #ff0000;
}
.panel-custom-horrible-red > .panel-heading {
    background: #ff0000; 
    color: #ffffff;
    border-color: #ff0000;
}

Fiddle: https://jsfiddle.net/x05f4crg/1/

Solution 4:

Bootstrap sometimes uses contextual class constructs. Those are what you should target to change styling.

You don't need to create your own custom class as suggested in the answer from Kiran Varti.

So you only need:

CSS:

.panel-default > .panel-heading {
  background: #black;
}

HTML:

<div class="panel panel-default">

Explanation here. Also see contextual class section here.

To match navbar-inverse use #222. Panel-inverse was requested in V3, but rejected due to larger priorities.

You can change the foreground color in that heading override or you can do it separately for panel titles. Depends what you are trying to achieve.

.panel-title {
  color: white;
}

Solution 5:

Another way to change the color is remove the default class and replace , in the panel using the classes of bootstrap.

example:

<div class="panel panel-danger">
  <div class="panel-heading">
  </div>
</div>