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'.

Practice

1. What is the main purpose of the Bootstrap figure component?

easy

A. To add buttons below images

B. To create a navigation menu with images

C. To group images and their captions together with proper styling

D. To make images clickable links

Solution

1. Step 1: Understand the figure component role

   The Bootstrap figure component is designed to group an image and its caption in a semantic and styled way.

2. Step 2: Identify correct usage

   It uses classes like figure-img for the image and figure-caption for the caption, ensuring proper layout and responsiveness.

3. Final Answer:

   To group images and their captions together with proper styling -> Option C

4. Quick Check:

   Figure groups image + caption = A [OK]

Hint: Figure groups image and caption together visually [OK]

Common Mistakes:

• Thinking figure creates navigation menus
• Confusing figure with button groups
• Assuming figure makes images clickable

2. Which of the following is the correct way to add a caption inside a Bootstrap figure?

easy

A. <figcaption class='figure-caption'>Caption text</figcaption>

B. <caption class='figure-caption'>Caption text</caption>

C. <div class='figure-caption'>Caption text</div>

D. <span class='figure-caption'>Caption text</span>

Solution

1. Step 1: Identify the semantic tag for captions in figures

   The correct HTML tag for captions inside a figure is <figcaption>.

2. Step 2: Confirm Bootstrap class usage

   Bootstrap uses the class figure-caption on the <figcaption> tag to style captions properly.

3. Final Answer:

   <figcaption class='figure-caption'>Caption text</figcaption> -> Option A

4. Quick Check:

   Use <figcaption> with figure-caption class = D [OK]

Hint: Caption uses <figcaption> with class figure-caption [OK]

Common Mistakes:

• Using <caption> instead of <figcaption>
• Using generic <div> or <span> without semantic meaning
• Omitting the figure-caption class

3. What will be the visual result of this Bootstrap figure code?

<figure class='figure'>
  <img src='flower.jpg' class='figure-img img-fluid rounded' alt='Flower'>
  <figcaption class='figure-caption text-end'>A beautiful flower</figcaption>
</figure>

medium

A. Only the caption text appears, image is hidden

B. An image of a flower with caption centered below, image corners sharp

C. An image of a flower with caption above the image, image corners rounded

D. An image of a flower with a caption aligned to the right below it, image corners rounded

Solution

1. Step 1: Analyze image classes

   The image uses figure-img, img-fluid for responsiveness, and rounded for rounded corners.

2. Step 2: Analyze caption classes

   The caption uses figure-caption and text-end, which aligns the caption text to the right below the image.

3. Final Answer:

   An image of a flower with a caption aligned to the right below it, image corners rounded -> Option D

4. Quick Check:

   Rounded image + right-aligned caption = A [OK]

Hint: Check classes: rounded image + text-end caption = right aligned [OK]

Common Mistakes:

• Assuming caption is centered by default
• Ignoring the rounded class effect
• Thinking caption appears above image

4. Identify the error in this Bootstrap figure code:

<figure>
  <img src='dog.jpg' class='figure-img img-fluid' alt='Dog'>
  <figcaption>A cute dog</figcaption>
</figure>

medium

A. Missing figure-caption class on <figcaption>

B. Missing figure-img class on <img>

C. The alt attribute is missing on the image

D. The figure tag should be replaced with div

Solution

1. Step 1: Check image classes

   The image has figure-img and img-fluid, which is correct for Bootstrap figure images.

2. Step 2: Check caption classes

   The <figcaption> is missing the figure-caption class, which is needed for proper Bootstrap styling.

3. Final Answer:

   Missing figure-caption class on <figcaption> -> Option A

4. Quick Check:

   Caption needs figure-caption class = B [OK]

Hint: Caption must have figure-caption class for styling [OK]

Common Mistakes:

• Forgetting figure-caption class on caption
• Thinking alt attribute is optional
• Replacing semantic figure tag with div

5. You want to create a responsive Bootstrap figure with an image that has a circular shape and a caption centered below it. Which code snippet achieves this correctly?

hard

A. <figure class='figure'>
<img src='profile.jpg' class='figure-img rounded-circle' alt='Profile'>
<figcaption class='figure-caption'>User Profile</figcaption>
</figure>

B. <figure class='figure'>
<img src='profile.jpg' class='figure-img img-fluid rounded-circle' alt='Profile'>
<figcaption class='figure-caption text-center'>User Profile</figcaption>
</figure>

C. <figure>
<img src='profile.jpg' class='img-fluid rounded' alt='Profile'>
<figcaption class='text-center'>User Profile</figcaption>
</figure>

D. <figure class='figure'>
<img src='profile.jpg' class='figure-img img-fluid rounded' alt='Profile'>
<figcaption class='figure-caption text-start'>User Profile</figcaption>
</figure>

Solution

1. Step 1: Ensure figure container and image classes

   The figure uses class figure. The image uses figure-img for styling, img-fluid for responsiveness, and rounded-circle for circular shape.

2. Step 2: Check caption classes for alignment

   The caption uses figure-caption and text-center to center the caption below the image.

3. Final Answer:

   Code snippet with figure, figure-img img-fluid rounded-circle, and figure-caption text-center -> Option B

4. Quick Check:

   Circle image + centered caption + responsive = C [OK]

Hint: Use rounded-circle + img-fluid + figure-caption text-center [OK]

Common Mistakes:

• Omitting img-fluid for responsiveness
• Using rounded instead of rounded-circle for circle shape
• Not centering caption text