Bootstrap Ratio Embed Patterns

Use ratio helpers to create responsive containers that maintain a specific aspect ratio. Perfect for videos, maps, and embedded content that must scale proportionally.

Built-in Aspect Ratios

Bootstrap provides four predefined ratios. Apply the .ratio base class along with a modifier class like .ratio-16x9.

`.ratio-1x1` (Square)

1:1

100% aspect ratio

`.ratio-4x3` (Standard)

4:3

75% aspect ratio

`.ratio-16x9` (Widescreen)

16:9

56.25% aspect ratio

`.ratio-21x9` (Ultra-wide)

21:9

42.86% aspect ratio

Video Embed Patterns

Wrap <iframe> elements in a ratio container for responsive video embeds. Always include a title attribute for accessibility.

YouTube Embed

Most YouTube videos use 16:9 aspect ratio. The iframe automatically fills the container.

Vimeo Embed

Video Placeholder (Before Loading)

Use ratio containers with placeholder content before videos load or for preview states.

Click to play video

Map Embed Pattern

Maps often work well in 4:3 or 16:9 ratios. Add loading="lazy" for performance.

Google Maps Embed

OpenStreetMap Embed

Custom Aspect Ratios

Create custom ratios using the --bs-aspect-ratio CSS variable. The formula is: (height / width) * 100%.

2:1 (Panoramic)

2:1 (50%)

--bs-aspect-ratio: 50%;

3:2 (Photography)

3:2 (66.67%)

--bs-aspect-ratio: calc(2 / 3 * 100%);

5:4 (Large Format)

5:4 (80%)

--bs-aspect-ratio: 80%;

Understanding the Calculation

Formula: --bs-aspect-ratio: calc(height / width * 100%)

16:9 → calc(9 / 16 * 100%) = 56.25%
4:3 → calc(3 / 4 * 100%) = 75%
2:1 → calc(1 / 2 * 100%) = 50%

Responsive Sizing

Combine ratio containers with Bootstrap's sizing and spacing utilities for flexible, responsive layouts.

Centered with Max-Width

Use max-width and .mx-auto to constrain and center.

max-width: 640px

Ratio in Grid Columns

Ratio containers work seamlessly within Bootstrap's grid system.

col-md-6

Ratio in Card Component

Video Card

Ratio containers keep thumbnails consistent.

Accessibility Considerations

Required: All <iframe> elements must have a descriptive title attribute for screen readers.

Accessible Iframe Example

<div class="ratio ratio-16x9">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Introduction to Bootstrap 5 - Tutorial Video"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media"
    allowfullscreen></iframe>
</div>

Accessibility Checklist

title attribute describes the embedded content
Use loading="lazy" for below-the-fold content
Consider providing text alternatives near embedded media
Ensure sufficient color contrast for placeholder content

Combined Patterns

Combine ratio helpers with other Bootstrap utilities for complex layouts.

Video Gallery Grid

Video 1

Video 2

Video 3

Video 4

Video 5

Video 6

Hero Section with Ratio Background

Background video/image area