M.Jags M.Jags - 4 months ago 58
HTML Question

Equal height columns bootstrap 3

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

<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

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/