How to change bootstrap panel footer color

Question

I have a bootstrap panel, and I want to change the footer color like its header. I added panel-primary next to panel-footer class, but only top outline color that is changed into primary color. So, how can I change the color of panel footer ?

code :

<div class="panel panel-primary">
     <div class="panel-heading">                  
          Panel Heading
     </div><!--.panel-heading-->

     <div class="panel-body">
           Panel Body
     </div><!--.panel-body-->

     <div class="panel-footer panel-primary">
            Panel Footer
      </div><!--.panel-footer-->
</div>

Answer 1

You have to create a custom class to apply to the panel-footer class:

Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground. See docs.

.panel-footer.panel-custom {
    background: red;
    color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-primary">
    <div class="panel-heading">Panel Heading</div>
    <!--.panel-heading-->
    <div class="panel-body">Panel Body</div>
    <!--.panel-body-->
    <div class="panel-footer panel-custom">Panel Footer</div>
    <!--.panel-footer-->
</div>