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.

Possible duplicate of [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) — Joseph Young, Jul 25 '16 at 16:43

score 6 · Accepted Answer · answered Jul 25 '16 at 16:53

6

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/

answered Jul 25 '16 at 16:53

Ninoop p george

678
5
22

score 2 · Answer 2 · edited Feb 25 '21 at 12:02

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

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 — Sanket Patel, Jul 25 '16 at 17:13

score 2 · Answer 3 · edited Jul 25 '16 at 17:36

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

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... — Daebak, Jul 25 '16 at 17:13

score -1 · Answer 4 · edited Jan 04 '19 at 14:35

-1

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.

edited Jan 04 '19 at 14:35

observer

2,925
1
19
38

answered Jul 25 '16 at 16:47

Munish Chechi

135
6

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. – observer Jan 04 '19 at 14:36

Equal height columns bootstrap 3

4 Answers4