How to make columns height equal using Jquery

Step1:

Welcome to designer blog, here we are going to discuss about,  How to make columns height equal using Jquery

Step2:

Html Markup 

 <div id ="left"> </div>
  <div id ="right"> </div>

Depend upon the content  both right and left div's height may be vary. so that we can fix this
by using jquery.

Step3:

Math.max will calculate the two divs height and takes the highest  height  either it may be left or right.

$(document).ready(function() {
        var d = Math.max($("#left").height(), $("#right").height());
        $("#left").height(d);
        $("#right").height(d);
       
            });

Highest height will be assigned  to both left and right, so that both column render in same height.

Step4:

Setting the equal heights in Responsive view. Below is the function,Where we can set the height: auto for mobile view and other resolution like tablet and desktop will set the equal heights based on left and right "Div Element" which is greater than one another.

Function MaxHeights ()
{
          if($(window).width() <= 767)
{
$("#left").css('height', 'auto');
                        $("#right").css('height', 'auto');

}
    else
{
   $("#left").height("");
                   $("#right").height("");
   var MaxHeight = Math.max($("#left").height(), $("#right").height());
           $("#left").height(MaxHeight);
                   $("#right").height(MaxHeight);
}
}

$(window).resize(function() {

        MaxHeights();

 });

  $(window).load(function() {

        MaxHeights();

 });


Step4:

Enjoy folks

How can I make Bootstrap columns all the same height?

Welcome to designers dairy blog here, we are going to discuss about, How to make the columns height equal in bootstrap framework.

Step1:

We have to write custom class for row called row-eq-height which makes all the columns height equal
 
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

Step2:




 

Step3: 

Enjoy folks

Source taken from http://getbootstrap.com.vn/examples/equal-height-columns/