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-1606318313647-137d1f3b4d3c?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.
Teeth whitening
Skin check
Heart screening
Dental cleaning
Video consult
Blood test
<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-7.svg" alt="Teeth whitening" class="object-fit-cover">
</div>
<p class="small text-truncate mt-1 mb-0">Teeth whitening</p>
</div>
<div class="col-4 col-md-2">
<div class="ratio ratio-1x1 rounded overflow-hidden border">
<img src="../assets/img/product-8.svg" alt="Skin check" class="object-fit-cover">
</div>
<p class="small text-truncate mt-1 mb-0">Skin check</p>
</div>
<div class="col-4 col-md-2">
<div class="ratio ratio-1x1 rounded overflow-hidden border">
<img src="../assets/img/product-11.svg" alt="Heart screening" class="object-fit-cover">
</div>
<p class="small text-truncate mt-1 mb-0">Heart screening</p>
</div>
<div class="col-4 col-md-2">
<div class="ratio ratio-1x1 rounded overflow-hidden border">
<img src="../assets/img/product-2.svg" alt="Dental cleaning" class="object-fit-cover">
</div>
<p class="small text-truncate mt-1 mb-0">Dental cleaning</p>
</div>
<div class="col-4 col-md-2">
<div class="ratio ratio-1x1 rounded overflow-hidden border">
<img src="../assets/img/product-6.svg" alt="Video consult" class="object-fit-cover">
</div>
<p class="small text-truncate mt-1 mb-0">Video consult</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="Blood test" class="object-fit-cover">
</div>
<p class="small text-truncate mt-1 mb-0">Blood test</p>
</div>
</div>4Cinematic hero banner
ratio-21x9 for a wide banner with a headline overlay.
Modern healthcare close to home
Our team has done this many times, so you never have to guess.
<div class="ratio ratio-21x9 rounded-3 overflow-hidden">
<div>
<img src="https://images.unsplash.com/photo-1758691462123-8a17ae95d203?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">Modern healthcare close to home</h3>
<p class="small mb-0 d-none d-sm-block">Our team has done this many times, so you never have to guess.</p>
</div>
</div>
</div>5Map placeholder
A 4:3 box reserved for a map, showing the address until the map loads.
Glowix Studio100 Market Square, Melbourne
<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>Glowix Studio</strong><span class="small text-body-secondary">100 Market Square, Melbourne</span>
</div>
</div>6Custom 3:2 photo
Any ratio works with the --ui-aspect-ratio variable: 2 / 3 = 66.67% for classic photo prints.
<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-1581056771107-24ca5f033842?auto=format&fit=crop&w=1200&h=800&q=70" alt="Simple habits for a healthier back" class="object-fit-cover">
</div>
<figcaption class="small text-body-secondary mt-1">3:2 · Sleep tips our doctors actually use</figcaption>
</figure>7Portrait team cards
A 3:4 portrait ratio (133.33%) for team photos in cards.
Chloe Patel
Finance Lead
Hana Delgado
HR Partner
Samir Nguyen
Marketing Lead
<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-1758691461990-03b49d969495?auto=format&fit=crop&w=1200&h=800&q=70" alt="Chloe Patel" class="object-fit-cover">
</div>
<div class="card-body py-2">
<h3 class="h6 mb-0">Chloe Patel</h3>
<p class="small text-body-secondary mb-0">Finance Lead</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-1584516150909-c43483ee7932?auto=format&fit=crop&w=1200&h=800&q=70" alt="Hana Delgado" class="object-fit-cover">
</div>
<div class="card-body py-2">
<h3 class="h6 mb-0">Hana Delgado</h3>
<p class="small text-body-secondary mb-0">HR Partner</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-1758691462123-8a17ae95d203?auto=format&fit=crop&w=1200&h=800&q=70" alt="Samir Nguyen" class="object-fit-cover">
</div>
<div class="card-body py-2">
<h3 class="h6 mb-0">Samir Nguyen</h3>
<p class="small text-body-secondary mb-0">Marketing Lead</p>
</div>
</div>
</div>
</div>8Vertical stories
A 9:16 ratio (177.78%) for phone sized stories or short clips in a scrolling row.
EthanArjun
Lea
Theo<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-1758691462878-6edc3d3da1be?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Ethan Duarte" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 start-0 m-1 badge text-bg-dark">Ethan</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-1758691462123-8a17ae95d203?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Arjun Carter" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 start-0 m-1 badge text-bg-dark">Arjun</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-1631217873436-b0fa88e71f0a?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Lea Novak" 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-1758691462126-2ee47c8bf9e7?auto=format&fit=crop&w=1200&h=800&q=70" alt="Story by Theo Varga" class="w-100 h-100 object-fit-cover"><span class="position-absolute bottom-0 start-0 m-1 badge text-bg-dark">Theo</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:21%">
</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:75%">
</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:41%">
</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:86%">
</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:20%">
</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:84%">
</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:67%">
</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:41%">
</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.
insights
The small habits that make a big difference
May 24, 2026
<div class="card" style="max-width:22rem">
<div class="ratio ratio-16x9 card-img-top overflow-hidden">
<img src="https://images.unsplash.com/photo-1758691462123-8a17ae95d203?auto=format&fit=crop&w=1200&h=800&q=70" alt="What our patients asked us most" class="object-fit-cover">
</div>
<div class="card-body">
<span class="badge text-bg-light border mb-2">insights</span>
<h3 class="h6">The small habits that make a big difference</h3>
<p class="small text-body-secondary mb-0">May 24, 2026</p>
</div>
</div>11Caption over a gradient
A 4:3 image with a gradient overlay so white caption text stays readable.
LisbonPhysiotherapy
<div class="ratio ratio-4x3 rounded-3 overflow-hidden" style="max-width:24rem">
<div>
<img src="https://images.unsplash.com/photo-1758691462126-2ee47c8bf9e7?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">Lisbon</strong><span class="small">Physiotherapy</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-1758691461990-03b49d969495?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-1758691462858-f1286e5daf40?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-1631217871099-88310a909a32?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-1758691462126-2ee47c8bf9e7?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 |
|---|---|---|
 | Annual check-up | $144.99 |
| Teeth whitening | $274.00 |
 | Braces consultation | Free |
<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="Annual check-up" class="object-fit-cover"></div></td>
<td class="align-middle">Annual check-up</td>
<td class="align-middle text-end">$144.99</td>
</tr>
<tr>
<td style="width:4rem"><div class="ratio ratio-1x1 rounded overflow-hidden"><img src="../assets/img/product-7.svg" alt="Teeth whitening" class="object-fit-cover"></div></td>
<td class="align-middle">Teeth whitening</td>
<td class="align-middle text-end">$274.00</td>
</tr>
<tr>
<td style="width:4rem"><div class="ratio ratio-1x1 rounded overflow-hidden"><img src="../assets/img/product-12.svg" alt="Braces consultation" class="object-fit-cover"></div></td>
<td class="align-middle">Braces consultation</td>
<td class="align-middle text-end">Free</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" 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
primary
secondary
secondary
success
success
info
info
warning
warning
danger
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.
13:56NewA beginner's guide to getting started
13:01When to choose a video consultation
12:45A simple monthly skin check
<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-1584516150909-c43483ee7932?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">13:56</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">A beginner's guide to getting started</p>
</div>
<div class="col-md-4">
<div class="ratio ratio-16x9 rounded overflow-hidden">
<div>
<img src="https://images.unsplash.com/photo-1606318313647-137d1f3b4d3c?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">13:01</span>
</div>
</div>
<p class="small fw-semibold mt-1 mb-0">When to choose a video consultation</p>
</div>
<div class="col-md-4">
<div class="ratio ratio-16x9 rounded overflow-hidden">
<div>
<img src="https://images.unsplash.com/photo-1758691462878-6edc3d3da1be?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:45</span>
</div>
</div>
<p class="small fw-semibold mt-1 mb-0">A simple monthly skin check</p>
</div>
</div>17Media list
Fixed width 4:3 thumbnails beside article titles in a reading list.
Understanding your blood test results
Oct 9, 2026 · 4 min read
What to expect at your first dental visit
Dec 3, 2025 · 6 min read
Our favourite tips for busy weeks
May 11, 2026 · 10 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-1631217873436-b0fa88e71f0a?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="object-fit-cover"></div></div><div><h3 class="h6 mb-1">Understanding your blood test results</h3><p class="small text-body-secondary mb-0">Oct 9, 2026 · 4 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-1758691462126-2ee47c8bf9e7?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="object-fit-cover"></div></div><div><h3 class="h6 mb-1">What to expect at your first dental visit</h3><p class="small text-body-secondary mb-0">Dec 3, 2025 · 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-1758691462858-f1286e5daf40?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="object-fit-cover"></div></div><div><h3 class="h6 mb-1">Our favourite tips for busy weeks</h3><p class="small text-body-secondary mb-0">May 11, 2026 · 10 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-1631217871099-88310a909a32?auto=format&fit=crop&w=1600&h=700&q=70" alt="Care for the whole family" class="object-fit-cover">
</div>19Round avatars
ratio-1x1 with rounded-circle keeps profile pictures perfectly round even when the source is not square.
<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-1.svg" alt="Noah Ibrahim" class="object-fit-cover">
</div>
<span class="small d-block text-truncate mt-1">Noah</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-10.svg" alt="Leo Alvarez" class="object-fit-cover">
</div>
<span class="small d-block text-truncate mt-1">Leo</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="Priya Hughes" class="object-fit-cover">
</div>
<span class="small d-block text-truncate mt-1">Priya</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-10.svg" alt="Sofia Kowalski" class="object-fit-cover">
</div>
<span class="small d-block text-truncate mt-1">Sofia</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>