Update: For Bootstrap 4, just use the snippet below. See this pen for results:

<div class="container">
<div class="row">
  <div class="col-md-4 mt-3">
    <div class="box bg-success p-3 text-white h-100">
      Hello there. This box has lots of words but this doesn't matter, because the columns near me will automatically have equal heights. Same would have happened if the red or the blue box was filled with lots of content. Don't mind what I'm saying here, it's just to fill this area. Thanks!
    </div>
  </div>
  <div class="col-md-4 mt-3">
    <div class="box bg-primary p-3 text-white h-100">
      Hello there.
    </div>
  </div>
  <div class="col-md-4 mt-3">
    <div class="box bg-danger p-3 text-white h-100">
      Hello there.
    </div>
  </div>
</div>
</div>

Bootstrap 3 Tutorial

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 will 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

Let's stay in touch, please! We'll send you stories similar to "Responsive Bootstrap Equal Height Sidebar" if you join our newsletter. It's free and you can unsubscribe at anytime!

You may also like:

Comments

WowThemesNet membership

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

wow thems Join our free newsletter

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

Yes, I'd like to hear about your products and news. Privacy Policy