title: How to make panels full height of parent div?
body: <p>I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below. </p>
  
  <p>My problem here is that each panel contains a different and therefore appears with a different height. I tried adding <code>style="height:100%"</code> to them but that didn't change anything. </p>
  
  <p>Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - <strong>they only thing the differ is the paragraph with the variable text</strong>, everything else is the same for all panels and takes the same height for each of them. </p>
  
  <p><strong>Example panel:</strong> </p>
  
  <pre><code>&lt;form role="form"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
              &lt;div class="thumbnail thumbnail-hover"&gt;
                  &lt;div class="txtcntr" style="width:100%"&gt;&lt;span&gt;Placeholder for icon&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="caption"&gt;
                          &lt;h3 class="text-primary"&gt;Title&lt;/h3&gt;
                          &lt;p&gt;Some variable text&lt;/p&gt;
                          &lt;p&gt;&lt;a href="#" class="btn btn-info btn-block btn-responsive" target="_self"&gt;View&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      // ...same structure for other panels...
  &lt;/form&gt;
  </code></pre>