0

I cannot get the same height for a columns with different contents. 

<div class="row row-flex row-flex-wrap">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
                <div class="caption">
                    <h3>Tábano</h3>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                    <p>
                        <a href="index.html" class="btn btn-primary" role="button">Button</a> 
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
                <div class="caption">
                    <h3>Tábano</h3>
                    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                    <p>
                        <a href="index.html" class="btn btn-primary" role="button">Button</a> 
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>

1st content is longer than 2nd, but columns take different height, even with row-flex.

Bootply Link

Ted
  • 14,757
  • 2
  • 41
  • 58
Jota
  • 17
  • 6

1 Answers1

0

You'll need to add some CSS and an extra row...

Take a look at this demo bootply

This CSS:

@media (min-width: 768px) {

  .eq-height-thumbs{
      overflow:hidden;
  }

  .eq-height-thumbs .thumbnail{
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

  .eq-height-thumbs-base{
      overflow:hidden;
  }

  .eq-height-thumbs-base .thumbnail{
      margin-top: -15px
  }

}

For this HTML:

<div class="row eq-height-thumbs">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
            <div class="caption">
                 <h3>Tábano</h3>

                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                <p> <a href="index.html" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>

                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img class="img-responsive center-block" src="img/tabano.jpg" alt="..." data-src="holder.js/242x200/auto">
            <div class="caption">
                 <h3>Tábano</h3>

                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                <p> <a href="index.html" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>

                </p>
            </div>
        </div>
    </div>
</div>
<div class="row eq-height-thumbs-base hidden-xs">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">&nbsp;</div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">&nbsp;</div>
    </div>
</div>
Ted
  • 14,757
  • 2
  • 41
  • 58
  • That's works perfect, but in a resposive mode, when the screen takes a tablet width it doesn't work so well. Thank's. – Jota May 13 '15 at 19:35
  • @Jota I updated the answer and linked bootply to fix it for tablet/mobil sizes (wrapped additional CSS in a media query, and added `hidden-xs` to the base row). Take a look at the linked demo. – Ted May 13 '15 at 22:06
  • i've just apply those updates and it works better, but not at all cases. Please try to add another thumbnail and you'll release that each one works with different height when the screen width is changed. Thanks a lot! – Jota May 14 '15 at 10:56
  • @Jota are you hoping to have them the same height even after they stack on small screens? – Ted May 14 '15 at 12:21
  • that is what i hoped, but i've realised that it is only necessary for the same row!! Thank you a lot! – Jota May 14 '15 at 12:53