title: Bootstrap 3 > trying to create columns with equal heights
body: <p>I've only just started learning so please stick with me and I'll try provide as much info as I can.</p>
  
  <p>Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.</p>
  
  <p>I have been using this jquery library > <a href="https://github.com/mattbanks/jQuery.equalHeights" rel="nofollow noreferrer">https://github.com/mattbanks/jQuery.equalHeights</a> > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)</p>
  
  <p>I have also looked at a few other solutions such as > <a href="https://stackoverflow.com/questions/10771713/twitter-bootstrap-same-heights-on-fluid-columns">Twitter Bootstrap - Same heights on fluid columns</a> but this doesn't seem to work when I adjust it for multiple rows.</p>
  
  <p>Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.</p>
  
  <pre><code>&lt;div class = "container"&gt;
  &lt;div class="row"&gt;
      &lt;div id="equalheight"&gt;      
  
          &lt;div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"&gt;
              &lt;div class="info-block"&gt;&lt;!-- BODY BOX--&gt;
                  &lt;p&gt;one line of copy&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
  
          &lt;div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"&gt;
              &lt;div class="info-block"&gt;&lt;!-- BODY BOX--&gt;
                  &lt;p&gt;lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
  
          &lt;div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"&gt;
              &lt;div class="info-block"&gt;&lt;!-- BODY BOX--&gt;
                  &lt;p&gt;one line of copy&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
  
          &lt;div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo"&gt;
              &lt;div class="info-block"&gt;&lt;!-- BODY BOX--&gt;
                  &lt;p&gt;one line of copy&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;              
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Above is my html, the second content area has the large amount of copy</p>
  
  <pre><code>&lt;script&gt;
      $('#equalheight div').equalHeights();
  &lt;/script&gt;
  
  &lt;script&gt;
      $(window).resize(function(){
         $('#equalheight div').equalHeights(); 
      });
      $(window).resize();
  &lt;/script&gt;   
  </code></pre>
  
  <p>Above is my Javascript, calling the before mentioned library.</p>
  
  <p>Thanks for any help / advice</p>