How to align cards in carousel - Bootstrap 5? - html

Question

I have simple Bootstrap 5 cards in carousel. When the card has less text the height on the card is getting smaller, and the carousel is jumping while sliding.
How can I stretch the cards to be the same height as the highest card, without using fixed values?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div id="demo" class="carousel slide" data-bs-ride="carousel" style="background-color:powderblue;">
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container mt-3">
<h2>Basic Card 1</h2>
<div class="card">
<div class="card-body">Basic card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo
eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna
tempor, a rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla
cursus. Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus
dictum. Nam mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae
fringilla risus leo nec magna. Mauris luctus iaculis pretium. Nullam elit mi,
laoreet a felis ut, ullamcorper maximus nibh. Donec non dolor eu lectus condimentum
consectetur. Vivamus venenatis hendrerit nulla quis vestibulum.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container mt-3">
<h2>Basic Card 2</h2>
<div class="card">
<div class="card-body">Basic card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget
congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a
rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla cursus.
Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus dictum. Nam
mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae fringilla risus leo
nec magna. Mauris luctus iaculis pretium. Nullam elit mi, laoreet a felis ut,
ullamcorper maximus nibh. Donec non dolor eu lectus condimentum consectetur. Vivamus
venenatis hendrerit nulla quis vestibulum. In rhoncus purus sit amet urna luctus
finibus. Nulla varius imperdiet sem, vel lacinia purus elementum id.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container mt-3">
<h2>Basic Card 3</h2>
<div class="card">
<div class="card-body">Basic card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. .</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
```

Answer 1

I've created some CSS to adjust BS5 slider to make it work with slides, that have different height.
Also, I've updated card's structure according to BS5 docs:
card-title
card-text
I understand it's just example, but anyway, I did it just for better looking.
Take a look at comments I added to CSS part for more details.
/* updated carousel element to add gaps around cards */
.carousel {
background-color: powderblue;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* make inner block flex to stretch slides */
.carousel-inner {
display: flex;
}
/* make flex item to stretch parent container to max child height */
.carousel-item {
display: flex !important;
/* animate carousel item opacity property */
opacity: 0;
transition: transform .6s ease-in-out, opacity .3s ease-in-out !important;
}
/* animate carousel item opacity property */
.carousel-item.active {
opacity: 1;
z-index: 1;
}
.carousel-item-start,
.carousel-item-next {
opacity: 1;
}
/* end of animating of opacity */
/* added for example purpose (make arrows darker) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: brightness(0);
}
/* adjusting (stretching) slide's card to max height */
.carousel-item .container {
display: flex;
flex-direction: column;
}
.carousel-item .card {
flex-grow: 1;
}
/* end of adjusting */
/* play around this classes to animate it like you want */
/*
.carousel-item-end
.carousel-item-next
.carousel-item-prev
.carousel-item-start
*/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container mt-3">
<h2>Basic Card 1</h2>
<div class="card">
<div class="card-body">
<h5 class="card-title">Basic card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla
cursus. Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus dictum. Nam mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae fringilla risus leo nec magna. Mauris luctus iaculis pretium. Nullam elit mi, laoreet
a felis ut, ullamcorper maximus nibh. Donec non dolor eu lectus condimentum consectetur. Vivamus venenatis hendrerit nulla quis vestibulum.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container mt-3">
<h2>Basic Card 2</h2>
<div class="card">
<div class="card-body">
<h5 class="card-title">Basic card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. Vivamus scelerisque tortor ac elit fringilla
cursus. Suspendisse vitae dui sapien. Suspendisse at metus sed lacus faucibus dictum. Nam mollis, ex id viverra fermentum, mauris lectus sodales erat, vitae fringilla risus leo nec magna. Mauris luctus iaculis pretium. Nullam elit mi, laoreet
a felis ut, ullamcorper maximus nibh. Donec non dolor eu lectus condimentum consectetur. Vivamus venenatis hendrerit nulla quis vestibulum. In rhoncus purus sit amet urna luctus finibus. Nulla varius imperdiet sem, vel lacinia purus elementum
id.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container mt-3">
<h2>Basic Card 3</h2>
<div class="card">
<div class="card-body">
<h5 class="card-title">Basic card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis ac justo eget congue. Quisque commodo dignissim commodo. Vivamus feugiat quam id urna tempor, a rhoncus libero sollicitudin. .</p>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>