How do i create a row of cards with equal height that accommodates the tallest card?

904
0
08-26-2020 03:35 PM
JenniferSherry
New Contributor III

Hard to explain in the question title, but here's more detail:

I have a row of custom cards, and sometimes the card's title or description text varies in length.  This makes the cards vary in height to accommodate the longest card title or text. I'd rather have them all be the same height, which would be equal to the tallest one.  Here's an example of a row with 4 cards of varying height, based on differences in the title or description:

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;">
<div class="caption">
<h4>Card Title</h4>
<p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.  If we add more text the card just keeps getting taller than the other cards.</p>
<a href="#" class="btn btn-primary center-block" role="button">Open App</a>
</div>
</div>
</div>


<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;">
<div class="caption">
<h4>Card Title with more detail</h4>
<p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p>
<a href="#" class="btn btn-primary center-block" role="button">Open App</a>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;">

<div class="caption">
<h4>Card Title</h4>
<p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p>
<a href="#" class="btn btn-primary center-block" role="button">Open App</a>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<img src="https://d1yzezhhfj4ndu.cloudfront.net/default-project-thumbnail-250c773441bf9b5b2b363f3f403d4fa4.png" alt="Card Thumbnail" style="padding: 0px; margin-top: 5px;">
<div class="caption">
<h4>Card Title</h4>
<p style="font-size: 14px">Write a short description. Avoid policy terms or jargon.</p>
<a href="#" class="btn btn-primary center-block" role="button">Open App</a>
</div>
</div>
</div>

I've pored through a lot of documentation, but I'm new to this.  This was helpful:

Tips: Create Custom Cards with HTML 

I'm guessing I need to add some sort of Style code prior to the card's code, to make all of the cards' heights equal to the tallest one?

Thanks in advance for the help!

Jennifer

Tags (2)
0 Replies