Trick Equal Column Height


When you are trying to make equal heights in web designing, it was difficult to code CSS and JavaScript. And now its easy to make equal heights of different columns and here is the solution for that.  Here i am using the matchHeight.js: that can make equal the desired columns. This code works for responsive design too. This tutorial shows the easiest way to make all column or boxes that takes equal height of the taller one.Creating-Responsive-Equal-Height-Columns-with-jQuery

Here’s more info on matchHeight.js:

matchHeight.js Docs

matchHeight.js GitHub

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"><script>

Copy the above code in your HTML.

$(function() {
 $('.box').matchHeight(false);
});

This function will help to make all column equal when we give class=”box”  to the required div.

Now for working in responsive with bootstrap. Here’s the CSS code :

@media only screen and (max-width : 767px) {
.box { height: auto !important; }
}

sobean

Other posts by

Menu