Setting Same Height for div Boxes

There are times you create boxes with div and place it next to each other, then all ended up different height and destroys the design. It is possible to set the fixed height however it will become problematic if it is a mobile responsive design.

Framework used: jQuery / Bootstrap

Here's one example. Each box has different height and does not look pretty at all.

Result

Pink with envy This is us in decor.. one beautiful day..
Salty Saturdays
Dreaming of a place like this
Tropical Tropicana Where we rather be! Double Tap if you love to travel to escape winter!

HTML

CSS/JS

With jQuery and Bootstrap, plus a plugin called jquery.matchHeight.js, this can easily be fixed.

jQuery Plugin: jquery.matchHeight.js

First let's look at each individual box code

The classes col-xs-6 and col-sm-3 are Bootstrap Grid system classes that defines the size of the box for different browser width. Let me add style="background-color:#dddddd;" to this div so you can see it.

Pink with envy This is us in decor.. one beautiful day..
Salty Saturdays
Dreaming of a place like this
Tropical Tropicana Where we rather be! Double Tap if you love to travel to escape winter!

Now you can see that first div with col-xs-6 and col-sm-3 is the grey box, and second div with panel and panel-default is the rounded corner white box with grey border.

In addition to Bootstrap and jQuery, now I will add a link to jquery.matchHeight.js plugin and script to call the function.

Here the class item needs to be added to the div where you want the height to be equal. Let's test it by adding it to the first div.

Pink with envy This is us in decor..
one beautiful day..

Salty Saturdays

Dreaming of a place like this

Tropical Tropicana Where we rather
be! Double Tap if you love to travel to escape winter!

OK, this is not quite what I want. The first div, which is grey box is now all same height, but I want the white box to be the same height. Let's move the class item to next div and here's what I got.

Pink with envy This is us in decor..
one beautiful day..

Salty Saturdays

Dreaming of a place like this

Tropical Tropicana Where we rather
be! Double Tap if you love to travel to escape winter!

Finally removing the grey background color, and it is the final result. All needed is the jQuery, Bootstrap and matchHeight jQuery plugin. The class item needs to be added to the div where you want the height to be same, not the outer div. However if there's no border like this example, then item class can be added to the outer div as well.

Result

Pink with envy This is us in decor.. one beautiful day..
Salty Saturdays
Dreaming of a place like this
Tropical Tropicana Where we rather be! Double Tap if you love to travel to escape winter!

HTML

CSS/JS