Ratio utilities for embeds in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of Bootstrap's ratio utilities for embeds?

They help keep embedded content like videos or iframes at a consistent aspect ratio, so they resize nicely on different screen sizes without distortion.

beginner

Which Bootstrap class sets a 16:9 aspect ratio for embedded content?

The class .ratio-16x9 sets the aspect ratio to 16:9 for embedded elements.

beginner

How do you make an iframe responsive with Bootstrap ratio utilities?

Wrap the <code>&lt;iframe&gt;</code> inside a container with a ratio class like <code>.ratio-16x9</code>. This container controls the aspect ratio and makes the iframe resize properly.

beginner

Name two aspect ratios available by default in Bootstrap ratio utilities.

Bootstrap provides .ratio-16x9 and .ratio-4x3 by default for common video aspect ratios.

intermediate

How can you create a custom aspect ratio using Bootstrap's ratio utilities?

You can use the <code>.ratio</code> class with a custom CSS variable <code>--bs-aspect-ratio</code> set to the desired percentage to define a custom aspect ratio.

Which Bootstrap class would you use to make an embedded video keep a 4:3 ratio?

A .ratio-16x9

B .embed-responsive-4by3

C .ratio-4x3

D .video-responsive

Bootstrap uses .ratio-4x3 to keep a 4:3 aspect ratio for embedded content.

What HTML element should be wrapped inside a Bootstrap ratio container to make it responsive?

A button

B div

C span

D iframe

iframes are commonly wrapped inside a ratio container to keep their aspect ratio responsive.

How does Bootstrap control the aspect ratio in ratio utilities?

A Using padding-top percentage based on aspect ratio

B Using fixed width and height

C Using JavaScript to resize

D Using margin auto

Bootstrap uses padding-top with a percentage to maintain the aspect ratio responsively.

Which class is the base class for all ratio utilities in Bootstrap?

A .embed-responsive

B .ratio

C .responsive-video

D .aspect-ratio

The .ratio class is the base class for Bootstrap's ratio utilities.

To create a custom aspect ratio, which CSS variable is used with the .ratio class?

A --bs-aspect-ratio

B --aspect-ratio

C --ratio-value

D --embed-ratio

Bootstrap uses the --bs-aspect-ratio CSS variable to set custom aspect ratios.

Explain how Bootstrap's ratio utilities help make embedded videos responsive.

Think about how the container controls height relative to width.

Describe how to create a custom aspect ratio for an embed using Bootstrap classes and CSS variables.

Custom ratios use CSS variables with the base .ratio class.