Equal height columns bootstrap 3

Question

Hey there I am working on a project website , but I am facing problems, with columns,

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="row-eq-height"> <div class="col-xs-4 col-md-4"> <div class="thumbnail"> <img src="img/seo.png" height="150" width="150"> <div class="caption"> <h4 class="text-center">SEO Services</h4><hr class="style-one"> <h4 class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</h4> <div class="text-right"> <a href="#" class="btn btn-primary" >25$</a> </div> </div> </div> </div> <div class="col-xs-4 col-md-4 "> <div class="thumbnail"> <img src="img/s2.png" height="150" width="150"> <div class="caption"> <h4 class="text-center">Websiite Templates</h4><hr class="style-one"> <h4 class="text-center">Here we provide you with various different website templates,responsive, mobile interface enabled. as per your requirement.</h4> </div> </div> </div> <div class="col-xs-4 col-md-4"> <div class="thumbnail"> <img src="img/s3.png" height="150" width="150"> <div class="caption"> <h4 class="text-center">hello</h4><hr class="style-on"> <h4></h4> </div> </div> </div> </div>

Here is the demo

How should I correct this.

Answer 1

Set a minimum height for the .thumbnail class

.thumbnail {
    min-height: 330px;
}

and for the overflow issue add

.text-center {
    word-wrap: break-word;
}

Fiddle http://jsfiddle.net/8d8g7hyt/3/

Answer 2

This is one way to do it, by specifying min-height .

http://jsfiddle.net/8d8g7hyt/1/

 .row-eq-height .col-xs-4 .thumbnail{ min-height : 300px; } .row-eq-height .col-md-4 .thumbnail{ min-height : 300px; }

 <div class="row-eq-height"> <div class="col-xs-4 col-md-4"> <div class="thumbnail"> <img src="img/seo.png" height="150" width="150"> <div class="caption"> <h4 class="text-center">SEO Services</h4><hr class="style-one"> <h4 class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</h4> <div class="text-right"> <a href="#" class="btn btn-primary" >25$</a> </div> </div> </div> </div> <div class="col-xs-4 col-md-4 "> <div class="thumbnail"> <img src="img/s2.png" height="150" width="150"> <div class="caption"> <h4 class="text-center">Websiite Templates</h4><hr class="style-one"> <h4 class="text-center">Here we provide you with various different website templates,responsive, mobile interface enabled. as per your requirement.</h4> </div> </div> </div> <div class="col-xs-4 col-md-4"> <div class="thumbnail"> <img src="img/s3.png" height="150" width="150"> <div class="caption"> <h4 class="text-center">hello</h4><hr class="style-on"> <h4></h4> </div> </div> </div> </div>

Again, depends on what is your need, you can use max-height property to restrict height to particular point or height property to have a fix height

Answer 3

Use jquery check if it's ok

 var maxHeight = 0; $('.thumbnails').each(function(){ var thisH = $(this).height(); if (thisH > maxHeight) { maxHeight = thisH; } }); $('.thumbnails').height(maxHeight);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-eq-height"> <div class="col-xs-4 col-md-4"> <div class="thumbnails"> <img src="img/seo.png" height="150" width="150"> <div class="caption"> <div class="title"> <h4 class="text-center">SEO Services</h4> </div> <hr class="style-one"> <div class="text"> <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p> </div> </div> </div> </div> <div class="col-xs-4 col-md-4"> <div class="thumbnails"> <img src="img/seo.png" height="150" width="150"> <div class="caption"> <div class="title"> <h4 class="text-center">SEO Services</h4> </div> <hr class="style-one"> <div class="text"> <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p> </div> </div> </div> </div> <div class="col-xs-4 col-md-4"> <div class="thumbnails"> <img src="img/seo.png" height="150" width="150"> <div class="caption"> <div class="title"> <h4 class="text-center">SEO Services</h4> </div> <hr class="style-one"> <div class="text"> <p class="text-center">We provide you with SEO Services ,which will boost your site ranking on different search engine, Google,Yahoo,etc.</p> </div> </div> </div> </div> </div>

Cheers!!!

Answer 4

height is always set according to what's inside the div, but you can set a minimum height for your divs. Set a minimum height as you like as follow:

.col-xs-4{min-height:300px;}

I am using basic class of your code. You can create a special class and assign your divs.