How to align cards in carousel - Bootstrap 5?

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>