title: How to override bootstrap panel-heading color
body: <p>I know there are many questions like mine. However none of them are working. I have this html file:</p>
  
  <pre><code>&lt;div class="container col-md-6 col-md-offset-3"&gt;
  &lt;div class="panel-group"&gt;
       &lt;div class="panel panel-default"&gt;
  
          &lt;div class="panel-heading-custom panel-heading "&gt;Username&lt;/div&gt;
          &lt;div class="panel-body panel-info"&gt;{{ main.username }}&lt;/div&gt;
  
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and this css file:</p>
  
  <pre><code>.panel-default &gt; .panel-heading-custom {
      color: #333;
      background: black;
      border-color: #ddd;
   }
  </code></pre>
  
  <p>i've tried many options:</p>
  
  <p><code>.panel-heading</code>
  <code>.panel-default &gt; .panel-heading</code>
  <code>.panel-default.panel-heading</code>
  <code>.panel.panel-heading</code></p>
  
  <p>And a couple more. I know you can us !important, but I don't think that's the right way to do it. Could you please help me with that? </p>
  
  <p>This is what appears on my browser:</p>
  
  <p><a href="https://i.stack.imgur.com/k7JbG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k7JbG.png" alt="enter image description here"></a>
  Thanks!</p>