I have four Bootstrap 4 cards lined up, but the title for just one of the cards wraps to a second line. How can I code this so that all four card titles are flush bottom?
I tried setting the height of each card to a certain pixel height and then applied vertical-align: bottom, but that's not working.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FIRST CARD</h5>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">SECOND CARD</h5>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FOURTH CARD</h5>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>Here's a Codepen: https://codepen.io/Codewalker/pen/RXxaVM
How can I code this so that all four card titles are flush bottom.
Case 1: If the title of your content is not dynamic.
If you want to make the card flush to bottom. You need to set its height and use flexbox to flush it to bottom.
See the code below.
.card-title-cont{
height: 50px;
display:flex;
justify-content: flex-start;
align-items: flex-end;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">FIRST CARD</h5>
</div>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">SECOND CARD</h5>
</div>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
</div>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">FOURTH CARD</h5>
</div>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>Case 2: If the title of your content is dynamic.
I suggest you need to style your title to text-overflow: ellipsis; since the content is dynamic.
.card-title{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FIRST CARD</h5>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">SECOND CARD</h5>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FOURTH CARD</h5>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>Hopes this helps.