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.

• Joseph Young: Possible duplicate of CSS - Equal Height Columns?
• caub: use flexbox stackoverflow.com/a/33615481/3183756

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

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!!!

• Daebak: Sir you asked a solution that calculate the same height! The answer that accepted doesn't check the height of the box but just cut the words...

Answer 3

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

• Mahesh Jaganiya: Thanks for the solution , It Worked.
• Sanket Patel: it does, its the simplest way. he can set it min-height to what his largest column would be. of-course it depends on the needs of how you want to do it and what you are looking for @DaebakDo
• Daebak: @SanketPatel thnks!

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.

• observer: Please don't use slang abbreviations and take more care for the formal appearance of your answer. Also, your code had a typo. I don't think your code will work well across all responsive viewports.