title: Bootstrap ".panel-heading" opacity?
body: <p>So, i'm trying to set the Bootstrap Panel-Heading to be transparent.<br>
  Because of the z-index i cannot figure out how to do it.<br></p>
  
  <p>The panel-heading is on-top of panel-default.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;&lt;/div&gt;
    &lt;div class="panel-body"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.panel-default{
    background: rgba(255, 255, 255, 0.9);
  }
  .panel-default .panel-heading{
    background: rgba(255, 255, 255, 0.0);
  }
  .panel-default .panel-body{
    background: rgba(255, 255, 255, 0.95);
  }
  </code></pre>
  
  <p>I've tried to make the whole panel (panel-default) transparent,<br>
  and then gave the body a white color. Problem here is that the panel-body isn't cover the whole space below the heading. I just got a white area where i have some content/text.</p>
  
  <p>If i make the panel-default solid white, i cannot "get thru" it with transparent panel-heading. Because the heading is on-top of the panel-default.</p>
  
  <p><strong>UPDATE</strong><br>
  So my problem is that i'd like the heading to be transparent, but the body to be solid. AND the body to cover whole space below panel-heading.</p>
  
  <p><strong>EDIT</strong><br>
  I tried to set height for panel-body to 100% but it's still not covering the whole space below panel-heading.</p>
  
  <p><a href="https://i.stack.imgur.com/nbgBi.png" rel="nofollow"><img src="https://i.stack.imgur.com/nbgBi.png" alt="enter image description here"></a></p>
  
  <p><strong>UPPDATE</strong><br>
  The problem on the panel-body aint cover whole space was because i had set the panel-default height. I should had set the panel-body height instead!</p>