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

Just check the bootstrap. CSS and search for the class panel-heading and copy the default code.

Copy the default CSS to your personal CSS but vive it a diference classname like my-panel-header for example.

Edit the css Code from the new clones class created.

Answer 2

I tried using custom panel class but it didn't work. So for those who are struggling just like me, you can use inline CSS and it works fine for me.

Here is what my code looks like :

<div class="panel-heading" style="background-image:none;background: #a4c6ff;">

Answer 3

You can simply add an id attribute to the panel. Like this

<div class="panel-heading" id="mypanelId">Hello world </div>

Then in your custom CSS file:

#mypanelId{
    background-image: none;
    background: rgba(22, 20, 100, 0.8);
    color: white;
     }

Answer 4

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>

Answer 5

This should work:

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

}

Answer 6

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/