Force same height for paragraphs

Question

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container col-md-6 col-md-offset-3">
  <div class="row-fluid">
    <ul class="thumbnails list-inline">
      <li class="col-md-4">
        <div class="thumbnail">
          <img src="http://placehold.it/260x180" alt="" class="img-rounded">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a href="images#" class="btn btn-primary">Action</a> <a href="images#" class="btn">Action</a></p>
          </div>
        </div>
      </li>
      <li class="col-md-4">
        <div class="thumbnail">
          <img src="http://placehold.it/260x180" alt="" class="img-rounded">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a href="images#" class="btn btn-primary">Action</a> <a href="images#" class="btn">Action</a></p>
          </div>
        </div>
      </li>
      <li class="col-md-4">
        <div class="thumbnail">
          <img src="http://placehold.it/260x180" alt="" class="img-rounded">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a href="images#" class="btn btn-primary">Action</a> <a href="images#" class="btn">Action</a></p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

When this gets resized, the 3rd element which has more text than the others has a longer height. How do I ensure that all elements are forced to be the same height as the greatest?

https://stackoverflow.com/a/47184945/7427111 – Dhaval Jardosh Mar 27 '18 at 14:51 — Dhaval Jardosh, Mar 27 '18 at 14:51

score 0 · Answer 1 · answered Mar 27 '18 at 14:47

This can be achieved with flexbox:

ul.thumbnails {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
}

Note that this is just meant to illustrate the principle; you'll probably want to tweak this code to fit into your existing stylesheets.

I'd suggest you read up on CSS flexbox. There are some pretty good guides on css-tricks.com and MDN:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Force same height for paragraphs

1 Answers1