"card"
Bootstrap 4.1.1 Snippet by tieusuquay79

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
/* 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);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: