Bootstrap 5Utilities

Bootstrap 5 Ratio

The Bootstrap 5 ratio helper creates responsive elements that maintain a specific aspect ratio regardless of viewport width. It's used for embedding videos, responsive images, maps, and any content that must preserve proportional dimensions. Unlike fixed-height containers, ratio-scaled elements adapt fluidly across screen sizes.

Primary Class

.ratio

Common Use Cases

→Responsive YouTube/Vimeo video embeds
→Fixed aspect ratio image containers
→Embedded Google Maps
→Instagram/Twitter embed wrappers
→Hero background video containers
→Portrait image grids (1:1 or 4:5)

Variants & Classes

Variant	Description	Classes
1x1 ratio	Square aspect ratio — perfect for profile photos and product thumbnails.	`ratio ratio-1x1`
4x3 ratio	Standard photo and video ratio — slightly wider than tall.	`ratio ratio-4x3`
16x9 ratio	Widescreen video ratio — standard for HD video embeds.	`ratio ratio-16x9`
21x9 ratio	Ultra-wide cinematic ratio — for hero videos and wide banners.	`ratio ratio-21x9`
Custom ratio	Any aspect ratio using CSS custom property.	`ratio (style='--bs-aspect-ratio: 50%')`

Code Example

<!-- 16:9 responsive video embed -->
<div class="ratio ratio-16x9 rounded-3 overflow-hidden">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video" allowfullscreen></iframe>
</div>

<!-- 1:1 square image container -->
<div class="ratio ratio-1x1 rounded-3 overflow-hidden">
  <img src="/avatar.jpg" alt="Profile" class="object-fit-cover">
</div>

Live Examples

16:9 Video Embed

Standard widescreen video wrapper that maintains 16:9 proportions on all screen sizes.

Example 1

▶ 16:9 Video Embed

1:1 Square Grid

Three square containers in a row — commonly used for product thumbnails or profile photos.

Example 2

4:3 Photo Card

Standard photo ratio inside a card with overlay caption.

Example 3

📷

Photo Title

4:3 aspect ratio container

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Hero video background with 21:9 cinematic ratio
✓Product gallery with 1:1 square thumbnails
✓Instagram feed embed grid with 4:5 ratio
✓Full-width map embed with 16:9 ratio
✓Team profile grid with uniform 1:1 portraits

Best Practices

Always wrap iframe embeds in ratio containers

Raw iframe embeds from YouTube, Google Maps, or Twitter don't scale responsively. Wrapping them in a ratio div prevents overflow and maintains proportions on all devices.

Use object-fit-cover for image fills

When placing images inside ratio containers, add object-fit-cover to prevent distortion. The image fills the container and crops excess rather than stretching.

Combine with overflow-hidden for rounded corners

Ratio containers need overflow-hidden when using rounded corners — otherwise the inner content will bleed past the border radius.

FAQ

How do I create a custom aspect ratio in Bootstrap 5?

Set a custom CSS variable: style='--bs-aspect-ratio: 50%;' on the ratio div. The value is a percentage representing height/width × 100. For a 2:1 ratio, use 50%.

Does Bootstrap 5 ratio work with background images?

Yes — place a div with background-image inside the ratio container, or use an img tag with object-fit-cover. Both approaches maintain the aspect ratio while filling the container.