How to override Bootstrap's Panel heading background color?

Question

I\'m using a Panel from Bootstrap however for the heading I want to use my own background color for the heading. When I don\'t put panel-heading class

Answer 1

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

Answer 2

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

This is what worked for me to change the color to white.

Answer 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/

Answer 4

use this :

.panel-heading {
    background-color: #ececb0 !important;
}

Answer 5

am assuming custom_class to be your class to override heading color of the panel. just add !important to it or add inline styles or a id and add styles as they will have more specificity over class added styles.

• with !important

  .custom_class{ background-color: red !important; }

• with !important

• with ID :

  #custom_id{ background-color: red; }

-with inline styles :

<div id="custom_id" class="panel panel-default">
      <div class="panel-heading custom_class" style="background-color:red">
      </div>
    </div>