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 for the div, the layout gets screwed. So I thought I should keep panel-heading but then find a way to override the background color. So I decided to create a custom css class and use background-color and then add it to the div with panel-heading. But this didn't make any effect.

Any idea how to override the heading color of the panel?

Code:

<div class="panel panel-default">   <div class="panel-heading custom_class" >   </div> </div> 

Answer 1

This should work:

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

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