Responsive Bootstrap Equal Height Sidebar

For Bootstrap 4

Simply use the snippet below. See this pen for demo:

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

For Bootstrap 3

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

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 in Bootstrap 3?

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>
```
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>
```
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!

Demo Download

demo Mediumish - our most loved WordPress theme

Tutorials