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:

     $(function() {

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



You may also like:

WowThemesNet membership

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

ZuChristmas - Free Christmas Landing Page Template

WowPopup Plugin for WordPress - Documentation

wow thems Join our free newsletter

Let's keep in touch! Get new themes releases, updates, discounts and important news for your website straight to your inbox. You can unsubscribe at anytime!