bootstrap 5 card how to avoid large layout shifts

Here are several methods to avoid layout shifts with Bootstrap 5 cards:

　　1.Use aspect ratio containers for images:

<div class="card">
  <div class="ratio ratio-16x9">
    <img src="image.jpg" class="card-img-top" style="object-fit: cover;" alt="...">
  </div>
  <div class="card-body">
    <!-- content -->
  </div>
</div>

　　2.Use aspect ratio containers for images:

<div class="card">
  <img src="image.jpg" class="card-img-top" style="height: 200px; object-fit: cover;" alt="...">
  <div class="card-body">
    <!-- content -->
  </div>
</div>

　　3.Set fixed height for card bodies:

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body" style="height: 150px;">
    <!-- content -->
  </div>
</div>

　　4.Use CSS classes for consistent heights:

.card {
  height: 100%;
}
 
.card-img-top {
  height: 200px;
  object-fit: cover;
}
 
.card-body {
  height: 150px;
  overflow-y: auto;
}

　　5.Use placeholder elements while loading:

<div class="card">
  <div class="placeholder-glow">
    <div class="placeholder" style="height: 200px;"></div>
  </div>
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
    </p>
  </div>
</div>