html - Equal height columns bootstrap 3 -
hey there working on project website , facing problems, 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 seo services ,which boost 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 provide various different website templates,responsive, mobile interface enabled. per 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 demo
how should correct this.
set minimum height .thumbnail
class
.thumbnail { min-height: 330px; }
and overflow issue add
.text-center { word-wrap: break-word; }
Comments
Post a Comment