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.

Bootstrap 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 and classes

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

Code example

HTML

<!-- 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="https://i.pravatar.cc/200?u=ratio-avatar" 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

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

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.