Bootstrap v4.5 Make Cards The Same Size [duplicate] - html

Question

This question already has answers here:
Bootstrap 4 Cards of same height in columns
(7 answers)
Closed 2 years ago.
First, I'm sorry if there is already an answer to this somewhere. If so, just point me in that direction. I've been looking for a while and can't seem to find an answer that works the way I need.
I am trying to get all of the bootstrap cards on my heroku page to be the same size. I had it set with the container surrounding the responsive divs as display flex and justify-content-center and align-items-center. I have also tried align-items-stretch but it still doesn't result in the cards all being the same height. I've also tried using the bootstrap height utility (h-100) on the responsive divs within the row. Also used css min-height but ran into problems as content would overflow the divs when resizing window.
This is what I currently have that ends up with different sized cards based on the content:
<div class='home-container m-5'>
<div class="row d-flex mb-5 justify-content-center align-items-center">
<div class="col-sm-6 col-lg-4">
<a href='./Multi-welders'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder2.png" alt="ESAB Rebel EMP215IC welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Multiprocess Welders</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<a href='./helmets'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Safety_Equipment2.png" alt="Black welding helmet with red flames" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Helmets</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4 h-100">
<a href='./gloves'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Welding_Gloves.png" alt="Generic pair of leather welding gloves" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto">
<div class="card-body text-center">
<h2 class="card-title">Best Welding Gloves</h2>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card m-3 bg-light">
<img src="./images/Home/MIG_Welder.png" alt="MIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best MIG Welders</h2>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class='card m-3 bg-light'>
<img src="./images/Home/Tig Welder2.png" alt="TIG Welder" class="card-img-top pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best TIG Welders</h2>
</div>
</div>
</div>
<div class='col-sm-6 col-lg-4'>
<div class='card m-3 bg-light'>
<img src="./images/Home/Multi_Welder.png" alt="Professional Welder" class="card-img-top p-3 pl-md-2 pt-2 pr-md-2 mx-auto coming-soon">
<div class="card-body text-center">
<div class="ribbon ribbon-top-left"><span>Coming Soon</span>
</div>
<h2 class="card-title coming-soon">Best Professional Welders</h2>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can add the following css class:
.card {
height: 200px
}
This will give all your cards the same height. You can just change the height to whatever you like.