Ratio

The ratio helper keeps a box at a fixed aspect ratio whatever its width, which is perfect for media placeholders, thumbnails, galleries and banners. Pick ratio-1x1, ratio-4x3, ratio-16x9 or ratio-21x9, or set any ratio with the --ui-aspect-ratio variable.

1The four built-in ratios

ratio-1x1, ratio-4x3, ratio-16x9 and ratio-21x9 next to each other, filled with a plain div.

1:1

4:3

16:9

21:9

<div class="row g-3">
  <div class="col-6 col-md-3">
    <div class="ratio ratio-1x1">
      <div class="d-flex align-items-center justify-content-center bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded fw-semibold">
        1:1
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="ratio ratio-4x3">
      <div class="d-flex align-items-center justify-content-center bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded fw-semibold">
        4:3
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="ratio ratio-16x9">
      <div class="d-flex align-items-center justify-content-center bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded fw-semibold">
        16:9
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="ratio ratio-21x9">
      <div class="d-flex align-items-center justify-content-center bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded fw-semibold">
        21:9
      </div>
    </div>
  </div>
</div>

2Video placeholder

A 16:9 poster image with a centred play button, ready for a video player of your choice.

<div class="ratio ratio-16x9 rounded overflow-hidden" style="max-width:36rem">
  <div>
    <img src="https://images.unsplash.com/photo-1529260830199-42c24126f198?auto=format&fit=crop&w=1600&h=700&q=70" alt="Video poster" class="w-100 h-100 object-fit-cover">
    <button type="button" class="btn btn-light rounded-circle position-absolute top-50 start-50 translate-middle shadow" aria-label="Play video"><i class="bi bi-play-fill" aria-hidden="true"></i></button>
  </div>
</div>

3Square product thumbnails

ratio-1x1 with object-fit-cover gives every product the same tile, whatever the photo size.

Old town walk

Ski chalet

Island hopping tour

Vineyard stay

Surf camp

Ocean view suite

<div class="row g-2">
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded overflow-hidden border">
      <img src="../assets/img/product-11.svg" alt="Old town walk" class="object-fit-cover">
    </div>
    <p class="small text-truncate mt-1 mb-0">Old town walk</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded overflow-hidden border">
      <img src="../assets/img/product-10.svg" alt="Ski chalet" class="object-fit-cover">
    </div>
    <p class="small text-truncate mt-1 mb-0">Ski chalet</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded overflow-hidden border">
      <img src="../assets/img/product-4.svg" alt="Island hopping tour" class="object-fit-cover">
    </div>
    <p class="small text-truncate mt-1 mb-0">Island hopping tour</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded overflow-hidden border">
      <img src="../assets/img/product-9.svg" alt="Vineyard stay" class="object-fit-cover">
    </div>
    <p class="small text-truncate mt-1 mb-0">Vineyard stay</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded overflow-hidden border">
      <img src="../assets/img/product-12.svg" alt="Surf camp" class="object-fit-cover">
    </div>
    <p class="small text-truncate mt-1 mb-0">Surf camp</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded overflow-hidden border">
      <img src="../assets/img/product-1.svg" alt="Ocean view suite" class="object-fit-cover">
    </div>
    <p class="small text-truncate mt-1 mb-0">Ocean view suite</p>
  </div>
</div>

4Cinematic hero banner

ratio-21x9 for a wide banner with a headline overlay.

Weekends you will talk about for years

Thousands of travellers already trust us, and we work hard to keep it that way.

<div class="ratio ratio-21x9 rounded-3 overflow-hidden">
  <div>
    <img src="https://images.unsplash.com/photo-1682686580036-b5e25932ce9a?auto=format&fit=crop&w=1600&h=700&q=70" alt="" class="w-100 h-100 object-fit-cover">
    <div class="position-absolute bottom-0 start-0 p-3 p-md-4 text-white" style="background:rgba(0,0,0,.45)">
      <h3 class="h4 mb-1">Weekends you will talk about for years</h3>
      <p class="small mb-0 d-none d-sm-block">Thousands of travellers already trust us, and we work hard to keep it that way.</p>
    </div>
  </div>
</div>

5Map placeholder

A 4:3 box reserved for a map, showing the address until the map loads.

Museeon81 Station Street, Vancouver

<div class="ratio ratio-4x3" style="max-width:24rem">
  <div class="d-flex flex-column align-items-center justify-content-center bg-body-tertiary border rounded text-center p-3">
    <span class="fs-1 text-primary"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i></span><strong>Museeon</strong><span class="small text-body-secondary">81 Station Street, Vancouver</span>
  </div>
</div>

6Custom 3:2 photo

Any ratio works with the --ui-aspect-ratio variable: 2 / 3 = 66.67% for classic photo prints.

A beginner's guide to getting started — 3:2 · Our favourite tips for busy weeks

<figure class="mb-0" style="max-width:28rem">
  <div class="ratio rounded overflow-hidden" style="--ui-aspect-ratio:66.67%">
    <img src="https://images.unsplash.com/photo-1554366347-897a5113f6ab?auto=format&fit=crop&w=1200&h=800&q=70" alt="A beginner&#39;s guide to getting started" class="object-fit-cover">
  </div>
  <figcaption class="small text-body-secondary mt-1">3:2 &middot; Our favourite tips for busy weeks</figcaption>
</figure>

7Portrait team cards

A 3:4 portrait ratio (133.33%) for team photos in cards.

Omar Tanaka

Project Manager

Diego Silva

Sales Executive

Amara Ibrahim

HR Partner

<div class="row g-3">
  <div class="col-6 col-md-4">
    <div class="card h-100">
      <div class="ratio card-img-top overflow-hidden" style="--ui-aspect-ratio:133.33%">
        <img src="https://images.unsplash.com/photo-1606922183036-62e19495eaab?auto=format&fit=crop&w=1200&h=800&q=70" alt="Omar Tanaka" class="object-fit-cover">
      </div>
      <div class="card-body py-2">
        <h3 class="h6 mb-0">Omar Tanaka</h3>
        <p class="small text-body-secondary mb-0">Project Manager</p>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card h-100">
      <div class="ratio card-img-top overflow-hidden" style="--ui-aspect-ratio:133.33%">
        <img src="https://images.unsplash.com/photo-1682686580036-b5e25932ce9a?auto=format&fit=crop&w=1200&h=800&q=70" alt="Diego Silva" class="object-fit-cover">
      </div>
      <div class="card-body py-2">
        <h3 class="h6 mb-0">Diego Silva</h3>
        <p class="small text-body-secondary mb-0">Sales Executive</p>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="card h-100">
      <div class="ratio card-img-top overflow-hidden" style="--ui-aspect-ratio:133.33%">
        <img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=1200&h=800&q=70" alt="Amara Ibrahim" class="object-fit-cover">
      </div>
      <div class="card-body py-2">
        <h3 class="h6 mb-0">Amara Ibrahim</h3>
        <p class="small text-body-secondary mb-0">HR Partner</p>
      </div>
    </div>
  </div>
</div>

8Vertical stories

A 9:16 ratio (177.78%) for phone sized stories or short clips in a scrolling row.

Freya

Leo

Lea

Jonah

<div class="d-flex gap-2 overflow-auto pb-1">
  <div class="flex-shrink-0" style="width:7rem">
    <div class="ratio rounded-3 overflow-hidden" style="--ui-aspect-ratio:177.78%">
      <div>
        <img src="https://images.unsplash.com/photo-1606922183036-62e19495eaab?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Freya Morgan" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 start-0 m-1 badge text-bg-dark">Freya</span>
      </div>
    </div>
  </div>
  <div class="flex-shrink-0" style="width:7rem">
    <div class="ratio rounded-3 overflow-hidden" style="--ui-aspect-ratio:177.78%">
      <div>
        <img src="https://images.unsplash.com/photo-1682686580036-b5e25932ce9a?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Leo Fischer" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 start-0 m-1 badge text-bg-dark">Leo</span>
      </div>
    </div>
  </div>
  <div class="flex-shrink-0" style="width:7rem">
    <div class="ratio rounded-3 overflow-hidden" style="--ui-aspect-ratio:177.78%">
      <div>
        <img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Lea Kim" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 start-0 m-1 badge text-bg-dark">Lea</span>
      </div>
    </div>
  </div>
  <div class="flex-shrink-0" style="width:7rem">
    <div class="ratio rounded-3 overflow-hidden" style="--ui-aspect-ratio:177.78%">
      <div>
        <img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Jonah Ortega" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 start-0 m-1 badge text-bg-dark">Jonah</span>
      </div>
    </div>
  </div>
</div>

9Chart area

A 16:9 box that keeps a simple bar chart in proportion on every screen.

Monthly bookings

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

<div class="card" style="max-width:36rem">
  <div class="card-header small fw-semibold">
    Monthly bookings
  </div>
  <div class="card-body">
    <div class="ratio ratio-16x9">
      <div class="d-flex align-items-end gap-2" role="img" aria-label="Bar chart of monthly bookings">
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:44%">
          </div>
          <span class="small text-body-secondary">Jan</span>
        </div>
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:53%">
          </div>
          <span class="small text-body-secondary">Feb</span>
        </div>
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:73%">
          </div>
          <span class="small text-body-secondary">Mar</span>
        </div>
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:80%">
          </div>
          <span class="small text-body-secondary">Apr</span>
        </div>
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:56%">
          </div>
          <span class="small text-body-secondary">May</span>
        </div>
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:82%">
          </div>
          <span class="small text-body-secondary">Jun</span>
        </div>
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:82%">
          </div>
          <span class="small text-body-secondary">Jul</span>
        </div>
        <div class="flex-fill d-flex flex-column justify-content-end align-items-center h-100">
          <div class="w-100 bg-primary rounded-top" style="height:73%">
          </div>
          <span class="small text-body-secondary">Aug</span>
        </div>
      </div>
    </div>
  </div>
</div>

10Blog card cover

ratio-16x9 as a card image keeps every post card in a grid the same height.

update

Looking back at a busy season

Oct 1, 2025

<div class="card" style="max-width:22rem">
  <div class="ratio ratio-16x9 card-img-top overflow-hidden">
    <img src="https://images.unsplash.com/photo-1682686580036-b5e25932ce9a?auto=format&fit=crop&w=1200&h=800&q=70" alt="A first-timer&#39;s guide to safari" class="object-fit-cover">
  </div>
  <div class="card-body">
    <span class="badge text-bg-light border mb-2">update</span>
    <h3 class="h6">Looking back at a busy season</h3>
    <p class="small text-body-secondary mb-0">Oct 1, 2025</p>
  </div>
</div>

11Caption over a gradient

A 4:3 image with a gradient overlay so white caption text stays readable.

PortoGuided tours

<div class="ratio ratio-4x3 rounded-3 overflow-hidden" style="max-width:24rem">
  <div>
    <img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="w-100 h-100 object-fit-cover">
    <div class="position-absolute bottom-0 w-100 p-3 text-white" style="background:linear-gradient(transparent,rgba(0,0,0,.7))">
      <strong class="d-block">Porto</strong><span class="small">Guided tours</span>
    </div>
  </div>
</div>

12Mixed ratio gallery

Combining 1:1, 4:3 and 16:9 tiles in one responsive grid.

<div class="row g-2">
  <div class="col-md-6">
    <div class="ratio ratio-4x3 rounded overflow-hidden">
      <img src="https://images.unsplash.com/photo-1783443076547-fb9cb67224a0?auto=format&fit=crop&w=1200&h=800&q=70" alt="Gallery photo 1" class="object-fit-cover">
    </div>
  </div>
  <div class="col-md-6">
    <div class="row g-2">
      <div class="col-6">
        <div class="ratio ratio-1x1 rounded overflow-hidden">
          <img src="https://images.unsplash.com/photo-1605130284535-11dd9eedc58a?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 2" class="object-fit-cover">
        </div>
      </div>
      <div class="col-6">
        <div class="ratio ratio-1x1 rounded overflow-hidden">
          <img src="https://images.unsplash.com/photo-1553355202-f869c36581ca?auto=format&fit=crop&w=800&h=800&q=70" alt="Gallery photo 3" class="object-fit-cover">
        </div>
      </div>
      <div class="col-12">
        <div class="ratio ratio-21x9 rounded overflow-hidden">
          <img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=1600&h=700&q=70" alt="Gallery photo 4" class="object-fit-cover">
        </div>
      </div>
    </div>
  </div>
</div>

13Thumbnails in table cells

A small ratio-1x1 box keeps order line images square inside a table.

Image	Item	Price
	Ocean view suite	$315.00
	Northern lights trip	$1,250
	Weekend getaway	$161.00

<table class="table align-middle mb-0">
  <thead>
    <tr>
      <th scope="col"><span class="visually-hidden">Image</span></th>
      <th scope="col">Item</th>
      <th scope="col" class="text-end">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width:4rem"><div class="ratio ratio-1x1 rounded overflow-hidden"><img src="../assets/img/product-1.svg" alt="Ocean view suite" class="object-fit-cover"></div></td>
      <td class="align-middle">Ocean view suite</td>
      <td class="align-middle text-end">$315.00</td>
    </tr>
    <tr>
      <td style="width:4rem"><div class="ratio ratio-1x1 rounded overflow-hidden"><img src="../assets/img/product-8.svg" alt="Northern lights trip" class="object-fit-cover"></div></td>
      <td class="align-middle">Northern lights trip</td>
      <td class="align-middle text-end">$1,250</td>
    </tr>
    <tr>
      <td style="width:4rem"><div class="ratio ratio-1x1 rounded overflow-hidden"><img src="../assets/img/product-6.svg" alt="Weekend getaway" class="object-fit-cover"></div></td>
      <td class="align-middle">Weekend getaway</td>
      <td class="align-middle text-end">$161.00</td>
    </tr>
  </tbody>
</table>

14Empty cover placeholder

A dashed 4:3 area that reserves space for an image that has not been chosen yet.

No cover image yet

<div class="ratio ratio-4x3" style="max-width:20rem">
  <div class="d-flex flex-column align-items-center justify-content-center border border-2 border-secondary-subtle rounded-3 text-body-secondary wt-border-dashed">
    <span class="fs-2"><i class="bi bi-image-fill" aria-hidden="true"></i></span><span class="small">No cover image yet</span>
  </div>
</div>

15Colour swatches

Empty square ratios make perfect colour swatches for a style guide.

primary

secondary

success

info

warning

danger

<div class="row g-2">
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded-3 bg-primary">
      <span class="visually-hidden">primary</span>
    </div>
    <p class="small text-center mt-1 mb-0">primary</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded-3 bg-secondary">
      <span class="visually-hidden">secondary</span>
    </div>
    <p class="small text-center mt-1 mb-0">secondary</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded-3 bg-success">
      <span class="visually-hidden">success</span>
    </div>
    <p class="small text-center mt-1 mb-0">success</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded-3 bg-info">
      <span class="visually-hidden">info</span>
    </div>
    <p class="small text-center mt-1 mb-0">info</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded-3 bg-warning">
      <span class="visually-hidden">warning</span>
    </div>
    <p class="small text-center mt-1 mb-0">warning</p>
  </div>
  <div class="col-4 col-md-2">
    <div class="ratio ratio-1x1 rounded-3 bg-danger">
      <span class="visually-hidden">danger</span>
    </div>
    <p class="small text-center mt-1 mb-0">danger</p>
  </div>
</div>

16Video thumbnails with badges

Duration and status badges positioned over 16:9 thumbnails.

12:38New

How to pack for two weeks with one bag

4:09

How to choose the right trip

12:28

What our travellers asked us most

<div class="row g-3">
  <div class="col-md-4">
    <div class="ratio ratio-16x9 rounded overflow-hidden">
      <div>
        <img src="https://images.unsplash.com/photo-1584467541268-b040f83be3fd?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 end-0 m-2 badge text-bg-dark">12:38</span><span class="position-absolute top-0 start-0 m-2 badge text-bg-danger">New</span>
      </div>
    </div>
    <p class="small fw-semibold mt-1 mb-0">How to pack for two weeks with one bag</p>
  </div>
  <div class="col-md-4">
    <div class="ratio ratio-16x9 rounded overflow-hidden">
      <div>
        <img src="https://images.unsplash.com/photo-1529260830199-42c24126f198?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 end-0 m-2 badge text-bg-dark">4:09</span>
      </div>
    </div>
    <p class="small fw-semibold mt-1 mb-0">How to choose the right trip</p>
  </div>
  <div class="col-md-4">
    <div class="ratio ratio-16x9 rounded overflow-hidden">
      <div>
        <img src="https://images.unsplash.com/photo-1606922183036-62e19495eaab?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 end-0 m-2 badge text-bg-dark">12:28</span>
      </div>
    </div>
    <p class="small fw-semibold mt-1 mb-0">What our travellers asked us most</p>
  </div>
</div>

17Media list

Fixed width 4:3 thumbnails beside article titles in a reading list.

Hidden beaches of the Mediterranean
Dec 23, 2025 · 7 min read
The best time of year to visit Japan
Jan 3, 2026 · 6 min read
The small habits that make a big difference
Jan 7, 2026 · 11 min read

<ul class="list-unstyled mb-0 vstack gap-3">
  <li class="d-flex gap-3"><div class="flex-shrink-0" style="width:6rem"><div class="ratio ratio-4x3 rounded overflow-hidden"><img src="https://images.unsplash.com/photo-1727622765649-1af1d87ee018?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="object-fit-cover"></div></div><div><h3 class="h6 mb-1">Hidden beaches of the Mediterranean</h3><p class="small text-body-secondary mb-0">Dec 23, 2025 &middot; 7 min read</p></div></li>
  <li class="d-flex gap-3"><div class="flex-shrink-0" style="width:6rem"><div class="ratio ratio-4x3 rounded overflow-hidden"><img src="https://images.unsplash.com/photo-1578894381163-e72c17f2d45f?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="object-fit-cover"></div></div><div><h3 class="h6 mb-1">The best time of year to visit Japan</h3><p class="small text-body-secondary mb-0">Jan 3, 2026 &middot; 6 min read</p></div></li>
  <li class="d-flex gap-3"><div class="flex-shrink-0" style="width:6rem"><div class="ratio ratio-4x3 rounded overflow-hidden"><img src="https://images.unsplash.com/photo-1605130284535-11dd9eedc58a?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="object-fit-cover"></div></div><div><h3 class="h6 mb-1">The small habits that make a big difference</h3><p class="small text-body-secondary mb-0">Jan 7, 2026 &middot; 11 min read</p></div></li>
</ul>

18Responsive ratio

A small custom class changes --ui-aspect-ratio per breakpoint: square on phones, 21:9 on tablets and up.

<div class="ratio hp-ratio-resp rounded-3 overflow-hidden">
  <img src="https://images.unsplash.com/photo-1553355202-f869c36581ca?auto=format&fit=crop&w=1600&h=700&q=70" alt="The world is waiting for you" class="object-fit-cover">
</div>

19Round avatars

ratio-1x1 with rounded-circle keeps profile pictures perfectly round even when the source is not square.

Kenji

Ivy

Mia

Finn

<div class="d-flex flex-wrap gap-3">
  <div class="text-center" style="width:5rem">
    <div class="ratio ratio-1x1 rounded-circle overflow-hidden border border-2 border-primary">
      <img src="../assets/img/avatar-11.svg" alt="Kenji Nguyen" class="object-fit-cover">
    </div>
    <span class="small d-block text-truncate mt-1">Kenji</span>
  </div>
  <div class="text-center" style="width:5rem">
    <div class="ratio ratio-1x1 rounded-circle overflow-hidden border border-2 border-primary">
      <img src="../assets/img/avatar-11.svg" alt="Ivy Novak" class="object-fit-cover">
    </div>
    <span class="small d-block text-truncate mt-1">Ivy</span>
  </div>
  <div class="text-center" style="width:5rem">
    <div class="ratio ratio-1x1 rounded-circle overflow-hidden border border-2 border-primary">
      <img src="../assets/img/avatar-7.svg" alt="Mia Delgado" class="object-fit-cover">
    </div>
    <span class="small d-block text-truncate mt-1">Mia</span>
  </div>
  <div class="text-center" style="width:5rem">
    <div class="ratio ratio-1x1 rounded-circle overflow-hidden border border-2 border-primary">
      <img src="../assets/img/avatar-2.svg" alt="Finn Alvarez" class="object-fit-cover">
    </div>
    <span class="small d-block text-truncate mt-1">Finn</span>
  </div>
</div>

20Loading skeleton

A 16:9 placeholder block with placeholder-glow while the real image and text load.

The skeleton reserves the exact space, so the page does not jump when content arrives.

<div class="card" style="max-width:22rem" aria-hidden="true">
  <div class="ratio ratio-16x9 placeholder-glow">
    <span class="placeholder"></span>
  </div>
  <div class="card-body placeholder-glow">
    <span class="placeholder col-7 mb-2"></span><span class="placeholder col-4"></span>
  </div>
</div>
<p class="small text-body-secondary mt-2 mb-0">The skeleton reserves the exact space, so the page does not jump when content arrives.</p>