Ratio utilities for embeds in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a responsive 16:9 video embed using Bootstrap ratio utilities.

Bootsrap

<div class="ratio [1]">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>
</div>

Drag options to blanks, or click blank then click option'

Aratio-4x3

Bratio-16x9

Cratio-1x1

Dratio-21x9

Attempts:

3 left

💡 Hint

Common Mistakes

Using ratio-4x3 which is for older TV screens.

Forgetting to add the ratio class before the ratio size.

The ratio-16x9 class sets the aspect ratio to 16:9, which is standard for most videos.

2fill in blank

medium

Complete the code to create a square (1:1) responsive embed container.

Bootsrap

<div class="ratio [1]">
  <iframe src="https://player.vimeo.com/video/76979871" title="Vimeo video" allowfullscreen></iframe>
</div>

Drag options to blanks, or click blank then click option'

Aratio-1x1

Bratio-16x9

Cratio-4x3

Dratio-21x9

Attempts:

3 left

💡 Hint

Common Mistakes

Using ratio-16x9 which is rectangular.

Not including the ratio base class.

The ratio-1x1 class creates a square container, useful for square videos or images.

3fill in blank

hard

Fix the error in the code to properly apply Bootstrap ratio utilities for a 4:3 embed.

Bootsrap

<div class="ratio [1]">
  <iframe src="https://www.example.com/embed" title="Example embed" allowfullscreen></iframe>
</div>

Drag options to blanks, or click blank then click option'

Aratio4x3

Bratio-16x9

Cratio-4x3

Dratio_4x3

Attempts:

3 left

💡 Hint

Common Mistakes

Using ratio4x3 without a hyphen causes the class to not apply.

Using underscores instead of hyphens.

The correct class is ratio-4x3 with a hyphen, following Bootstrap's naming convention.

4fill in blank

hard

Fill both blanks to create a responsive embed with a 21:9 ratio and add a border using Bootstrap classes.

Bootsrap

<div class="ratio [1] border [2] p-3">
  <iframe src="https://www.example.com/embed" title="Wide embed" allowfullscreen></iframe>
</div>

Drag options to blanks, or click blank then click option'

Aratio-21x9

Bborder-primary

Cborder-secondary

Dratio-16x9

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up ratio classes and border classes.

Using a ratio class that doesn't match the desired aspect ratio.

Use ratio-21x9 for the wide aspect ratio and border-primary for a blue border.

5fill in blank

hard

Fill all three blanks to create a responsive 4:3 embed with a shadow and rounded corners using Bootstrap classes.

Bootsrap

<div class="ratio [1] shadow [2] rounded [3]">
  <iframe src="https://www.example.com/embed" title="Styled embed" allowfullscreen></iframe>
</div>

Drag options to blanks, or click blank then click option'

Aratio-4x3

Bborder

Cborder-success

Dborder-danger

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the base border class.

Using a border color class without the base border class.

The ratio-4x3 sets the aspect ratio, border adds a border, and border-success colors the border green.