Figure component in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a figure with an image and a caption.

Bootsrap

<figure class="figure">
  <img src="image.jpg" class="[1]" alt="A scenic view">
  <figcaption class="figure-caption">A beautiful view</figcaption>
</figure>

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

Aimg-fluid

Bcaption

Ccontainer

Dfigure-img

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-fluid' instead of 'figure-img' changes image responsiveness but not figure styling.

Using 'caption' or 'container' are not valid classes for the image inside figure.

The Bootstrap class for images inside a figure component is 'figure-img'.

2fill in blank

medium

Complete the code to add a caption below the image in the figure component.

Bootsrap

<figure class="figure">
  <img src="photo.png" class="figure-img" alt="Nature">
  <figcaption class="figure-[1]">Nature at its best</figcaption>
</figure>

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

Atitle

Bcaption

Cimg

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'figure-img' class on caption instead of 'figure-caption'.

Using unrelated classes like 'title' or 'text' which do not style captions.

The caption text in Bootstrap figure uses the class 'figure-caption'.

3fill in blank

hard

Fix the error in the figure component code by completing the class name for the image.

Bootsrap

<figure class="figure">
  <img src="landscape.jpg" class="figure-[1]" alt="Landscape">
  <figcaption class="figure-caption">A calm landscape</figcaption>
</figure>

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

Aimg-thumbnail

Bimg-fluid

Cimg

Dimage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img-fluid' or 'img-thumbnail' which are Bootstrap image classes but not for figure images.

Using 'image' which is not a Bootstrap class.

The correct Bootstrap class for figure images is 'figure-img', but here the blank is missing 'img' part, so 'img' completes the class name to 'figure-img'.

4fill in blank

hard

Fill both blanks to create a responsive figure with an image and a caption.

Bootsrap

<figure class="figure">
  <img src="[1]" class="[2]" alt="Sunset">
  <figcaption class="figure-caption">Sunset view</figcaption>
</figure>

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

Asunset.jpg

Bfigure-img

Cimage.jpg

Dimg-fluid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'image.jpg' instead of the given file name 'sunset.jpg'.

Using 'img-fluid' instead of 'figure-img' for the figure image class.

The image source should be a valid file name like 'sunset.jpg' and the class for figure images is 'figure-img'.

5fill in blank

hard

Fill all three blanks to create a figure with a responsive image, alt text, and a caption.

Bootsrap

<figure class="figure">
  <img src="[1]" class="[2]" alt="[3]">
  <figcaption class="figure-caption">A scenic mountain</figcaption>
</figure>

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

Amountain.png

Bimg

CScenic mountain view

Dfigure-img

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img' instead of 'figure-img' for the class.

Leaving alt text blank or unrelated to the image.

Using wrong image file names.

The image source is 'mountain.png', the class for figure images is 'figure-img', and the alt text describes the image as 'Scenic mountain view'.