The screenshot below doesn’t look right for obvious reasons:

responsive bootstrap equal height

That’s what we’re trying to achieve, equal column heights. There are several CSS ways to obtain equal column heights, but the most reliable method is JQuery, simply because JQuery handles all the cross-browser inconsistencies.

So, how do we to obtain bootstrap equal height sidebar/columns?

  1. First, we’ll use this responsive equal heights plugin for jQuery. Download the script and call it at the end of your Bootstrap file (assuming your script is now placed inside js folder):

      <script src="js/jquery.matchHeight-min.js"></script>
    
  2. Assign a custom class to the columns you want equal, I use equalh in my example. We’ll use this class later in our script.

     <div class="col-md-3 equalh">my first column here</div>
     <div class="col-md-9 equalh">my second column here</div>
    
  3. Paste the following code before body ends but after you call the script from step 1:

     <script>
     $(function() {
         $('.equalh').matchHeight();
     });
     </script>
    

That’s it! Questions? Please, leave a comment below!

LIVE DEMO DOWNLOAD

Tutorials

We create themes & templates
Take a look at our
newest themes

ZuChristmas - Free Christmas Landing Page Template

WowPopup Plugin for WordPress - Documentation

  Keep an eye on what we're doing  
 
    Find us:      

Keep an eye on what we're doing