<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="bg-light pt-5 pb-5 shadow-sm"> <div class="container"> <div class="row pt-5"> <div class="col-12"> <h3 class="text-uppercase border-bottom mb-4">Equal height Bootstrap 5 cards example</h3> </div> </div> <div class="row"> <!--ADD CLASSES HERE d-flex align-items-stretch--> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <div class="card"> <img src="https://mit.sansukien.com/wp-content/uploads/2024/05/mit-say-gion-viet-tuong.jpg" class="card-img-top p-2" alt="Card Image"> <div class="card-body d-flex flex-column"> <h5 class="card-title">Dōtonbori Canal</h5> <p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p> <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a> </div> </div> </div> <!--ADD CLASSES HERE d-flex align-items-stretch--> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <div class="card"> <img src="https://mit.sansukien.com/wp-content/uploads/2024/05/mit-say-gion-viet-tuong-loai-hop.jpg" class="card-img-top p-2" alt="Card Image"> <div class="card-body d-flex flex-column"> <h5 class="card-title">Porto Timoni Double Beach</h5> <p class="card-text mb-4">Near Afionas village, on the west coast of Corfu island. The two beaches form two unique bays. The turquoise color of the sea contrasts to the high green hills surrounding it.</p> <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <div class="card"> <img src="https://mit.sansukien.com/wp-content/uploads/2024/05/mit-say-gion-loai-kg.jpg" class="card-img-top p-2" alt="Card Image"> <div class="card-body d-flex flex-column"> <h5 class="card-title">Dōtonbori Canal</h5> <p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p> <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a> </div> </div> </div> <!--ADD CLASSES HERE d-flex align-items-stretch--> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <div class="card"> <img src="https://mit.sansukien.com/wp-content/uploads/2024/05/mit-say-gion-viet-tuong-loai-hop.jpg" class="card-img-top p-2" alt="Card Image"> <div class="card-body d-flex flex-column"> <h5 class="card-title">Tritons Fountain</h5> <p class="card-text mb-4">Located just outside the City Gate of Valletta, Malta. It consists of three bronze Tritons holding up a large basin, balanced on a concentric base built out of concrete and clad in travertine slabs.</p> <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <div class="card"> <img src="https://mit.sansukien.com/wp-content/uploads/2024/05/mit-say-gion-viet-tuong.jpg" class="card-img-top p-2" alt="Card Image"> <div class="card-body d-flex flex-column"> <h5 class="card-title">Dōtonbori Canal</h5> <p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p> <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <div class="card"> <img src="https://mit.sansukien.com/wp-content/uploads/2024/05/mit-say-gion-viet-tuong-tui-200g.png" class="card-img-top p-2" alt="Card Image"> <div class="card-body d-flex flex-column"> <h5 class="card-title">Dōtonbori Canal</h5> <p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p> <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a> </div> </div> </div> </div> </div> </section>

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/ .card-img-top { height: 300px; object-fit: cover; } .card:hover img { -webkit-transform: scale(1.08); transform: scale(1.08); -webkit-transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1); transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1); }