How to Override Bootstrap's Panel Heading Background Color

Change background colour of panel heading when toggled in Bootstrap collapsible panel group

Use .active class instead of :active pseudo-class which only lasts as long as the user keeps their mouse-button (or pointing device equivalent) down. Target the link's parent .panel-header instead:

$('.panel-heading').on('click', function(e) {
  $(this).toggleClass('active');
});

The CSS has been modified to override .panel-heading with higher specificity by doubling the class:

.panel-heading.panel-heading {...

Some Bootstrap classes cannot be overridden by cascading priority, just double up on the target class as shown above -- do not use !important

Also, place <link> in the <head>. Place <script> before the closing </body> tag. See Demo.

Demo

.panel-heading.panel-heading.active {
  background: red;
}

.panel-title {
  display: inline-block;
  width: 100%;
}

.panel-heading.panel-heading.active .panel-title {
  color: white;
  font-weight: 900;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a data-toggle="collapse" class="panel-title" href="#collapse1">Title</a>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">item 1</li>
          <li class="list-group-item">item 2</li>
        </ul>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script>
    $('.panel-heading').on('click', function(e) {
      $(this).toggleClass('active');
    });
  </script>
</body>

</html>

How to override bootstrap panel-heading color

I guess your styles are being overridden. You can make sure that your styles to be not overridden either by

using !important
you can write the style as to have highest specificity
if there are two/more styles defined for a particular class or a selector, what ever comes last will come to effect

check this snippet

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><style>.panel-default>.panel-heading-custom {    color: #333;    background: black;    border-color: #ddd; }</style>
<div class="container col-md-6 col-md-offset-3"><div class="panel-group">     <div class="panel panel-default">
        <div class="panel-heading-custom panel-heading heading ">Username</div>        <div class="panel-body panel-info">{{ main.username }}</div>
     </div></div>

Bootstrap panel corners with custom color

add a border to the entire panel.

<div class="col-md-6">
  <div class="panel color-orange">
    <div class="panel-heading text-white text-center">
      text
    </div>
    <div class="panel-body color-white border-orange">
      <div class="col-md-8" style="height:200px">
        SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
      <div class="col-md-4" style="height:100px">
          SignUp to the system
      </div>
    </div>
  </div>
</div>

and in the css

.color-orange {
  background: #fa7921;
  // new border style
  border: solid 1px #fa7921;
}

.color-white {
  background: white;
}

How to change bootstrap panel footer color

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>

How to change the Bootstrap accordion header on collapse/collapsed

You can do a little hack to .accordion-toggle with CSS margins & paddings to cover all panel dimensions:

Snippet below:

.accordion-toggle {  background-color: gray;  display: block;  padding: 10px;  margin: -10px -15px;  border-top-left-radius: 4px;  border-top-right-radius: 4px;}
.accordion-toggle.collapsed {  background-color: white;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="panel panel-simple">  <div class="panel-heading" role="tab" id="headingOneMaintenance">    <h4 class="panel-title">      <a class="accordion-toggle" role="button" data-toggle="collapse" data-parent="#accordionMaintenance" href="#collapseOneMaintenance" aria-expanded="true" aria-controls="collapseOneMaintenance">        What will you do to prepare my apartment before I move in?      </a>    </h4>  </div>  <div id="collapseOneMaintenance" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOneMaintenance">    <div class="panel-body">      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird      on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw      denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.    </div>  </div></div>

How to change Bootstrap panel-body in LESS file?

Try changing your CSS

.vtc-panel{
   .panel;
   .panel-primary;
   .panel-body{
       background-color:gainsboro !important;
    }    
}

Also, try clearing your cache. This might help out some.

This should do the trick.