<div class="container">
<div class="row">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card 1</h3>
<h4 class="card-subtitle">of the group</h4>
<p class="card-text">You can use the cap image as an overlay for the body</p>
</div>
</div>
<div class="card text-primary">
<img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card 2</h3>
<h4 class="card-subtitle">Of the group</h4>
<p class="card-text">
Group Columns have the same width and height thanks to Flexbox
</p>
</div>
</div><div class="card">
<img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card 3</h3>
<h4 class="card-subtitle">Of the group</h4>
<p class="card-text">You can use the cap image as an overlay for the body</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card 1</h3>
<h4 class="card-subtitle">of the deck</h4>
<p class="card-text">You can use the cap image as an overlay for the body</p>
</div>
</div>
<div class="card text-primary">
<img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card 2</h3>
<h4 class="card-subtitle">Of the deck</h4>
<p class="card-text">
Group Columns have the same width and height thanks to Flexbox
</p>
</div>
</div><div class="card">
<img class="card-img-top" src="https://source.unsplash.com/daily?nature" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card 3</h3>
<h4 class="card-subtitle">Of the deck</h4>
<p class="card-text">You can use the cap image as an overlay for the body</p>
</div>
</div>
</div>
</div>
</div>
.card-group{
}
This Pen doesn't use any external JavaScript resources.