seo Question posted in
Some basic information to get you started with this can be found here.

Equal height columns bootstrap 3 – SEO

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.

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
  4. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search