How Can I Make Two Equal Height Columns In Bootstrap?

I have this code HTML:

Line

Solution 1:

try adding this to your CSS:

.row [class*="col-"]{
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

.row{
  overflow: hidden; 
}

https://jsfiddle.net/DTcHh/12810/

Or use flexbox:

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

https://jsfiddle.net/DTcHh/12811/

Solution 2:

This works for me well, hope it will resolve your issue of equalizing height.

Just apply class "eq_height" in the DIVs you want to make equal and include the code below in your page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.container-fluid .eq_height').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.container-fluid .eq_height').height(highestBox);

});
</script>

This will take the height of biggest div and equalize according to it.

Share