CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Mahesh Jaganiya
Mahesh Jaganiya

Reputation: 165

Equal height columns bootstrap 3

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.

Upvotes: 2

Views: 3419

Answers (4)

Sanket Patel
Sanket Patel

Reputation: 283

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

Upvotes: 2

Munish Chechi
Munish Chechi

Reputation: 135

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.

Upvotes: -1

Daebak
Daebak

Reputation: 419

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

Upvotes: 2

Ninoop p george
Ninoop p george

Reputation: 678

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/

Upvotes: 6

Related Questions