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    lt div class  panel panel-default  gt     lt div class  panel-heading custom class   gt     lt  div gt   lt  div gt

User · Answer

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/

User · Answer

You can simply add an id attribute to the panel  Like this    lt div class  panel-heading  id  mypanelId  gt Hello world  lt  div gt      Then in your custom CSS file      mypanelId      background-image  none      background  rgba 22  20  100  0 8       color  white

User · Answer

This should work    panel  gt   panel-heading       background-image  none      background-color  red      color  white

User · Answer

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      lt div class  panel-heading  style  background-image none background   a4c6ff   gt

User · Answer

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

User · Answer

Another way to change the color is remove the default class and replace   in the panel using the classes of bootstrap   example     lt div class  panel panel-danger  gt     lt div class  panel-heading  gt     lt  div gt   lt  div gt

User · Answer

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  gt   panel-heading     background   black      HTML    lt div class  panel panel-default  gt    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

User · Answer

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     lt div id  custom id  class  panel panel-default  gt         lt div class  panel-heading custom class  style  background-color red  gt         lt  div gt       lt  div gt

User · Answer

panel-default  gt  panel-heading       background   ffffff      This is what worked for me to change the color to white

User · Answer

use this     panel-heading       background-color   ececb0  important

User · Answer

How about creating your own Custom Panel class  That way you won t have to worry about overriding Bootstrap   HTML   lt div class  panel panel-custom-horrible-red  gt      lt div class  panel-heading  gt         lt h3 class  panel-title  gt Panel title lt  h3 gt      lt  div gt      lt div class  panel-body  gt        Panel content      lt  div gt   lt  div gt    CSS   panel-custom-horrible-red       border-color   ff0000     panel-custom-horrible-red  gt   panel-heading       background   ff0000       color   ffffff      border-color   ff0000      Fiddle  https   jsfiddle net x05f4crg 1

[css] How to override Bootstrap's Panel heading background color?

Examples related to css

Examples related to twitter-bootstrap