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

Our stories delivered in your Inbox

Join our newsletter and get more articles like this in your inbox.
We never spam and you can unsubscribe at any time!

You may also like:

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