Figure component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap figure code?

Look at the following HTML code using Bootstrap's figure component. What will you see rendered in the browser?

Bootsrap

<figure class="figure">
  <img src="https://via.placeholder.com/150" class="figure-img img-fluid rounded" alt="Placeholder image">
  <figcaption class="figure-caption">A simple placeholder image with caption.</figcaption>
</figure>

A An image with rounded corners and a caption below it in smaller italic text.

B An image with sharp corners and a caption above it in bold text.

C Only a caption text is shown, no image is visible.

D An image with a border but no caption is displayed.

💡 Hint

Remember that Bootstrap's figure-caption is styled to appear below the image in smaller italic text.

Bootstrap's figure component wraps an image and a caption. The image uses classes to make it fluid and rounded. The caption appears below the image in smaller italic text by default.

❓ selector

intermediate

Which CSS selector targets the caption text inside a Bootstrap figure component?

You want to style only the caption text inside a Bootstrap figure component. Which CSS selector will correctly select it?

A figure .caption-text

B .figure-caption img

C .figure figcaption

D .figure-img figcaption

💡 Hint

The caption is inside a

element that is a child of an element with class 'figure'.

The correct selector is '.figure figcaption' because figcaption is a child element inside the container with class 'figure'. Other options either select wrong elements or use incorrect class names.

🧠 Conceptual

advanced

What accessibility feature does the

element provide in a figure component?

Why is it important to use the

element inside a figure component for accessibility?

A It provides a textual description of the image that screen readers can read aloud.

B It automatically resizes the image for mobile devices.

C It adds a decorative border around the image.

D It hides the image from keyboard navigation.

💡 Hint

Think about how users who cannot see images understand the content.

The

element gives a description or caption for the image, which helps screen readers convey the meaning or context of the image to users with visual impairments.

❓ layout

advanced

How to align a Bootstrap figure component to the right side of the page?

You want the entire figure component (image and caption) to appear aligned to the right side of the page. Which class or style should you add?

Bootsrap

<figure class="figure">
  <img src="https://via.placeholder.com/150" class="figure-img img-fluid rounded" alt="Placeholder image">
  <figcaption class="figure-caption">Caption text here.</figcaption>
</figure>

A Add class "text-end" to the <img> element.

B Add class "float-end" to the <figure> element.

C Add style "margin-left: auto;" to the <figcaption> element.

D Add class "d-flex justify-content-center" to the <figure> element.

💡 Hint

Bootstrap uses float utility classes to float elements left or right.

Adding the class "float-end" to the

element floats the entire figure to the right side. "text-end" aligns text inside an element, not the whole figure. The other options do not correctly align the figure to the right.

📝 Syntax

expert

What error occurs if you omit the alt attribute in the tag inside a figure?

Consider this code snippet inside a Bootstrap figure component:

Image caption

What accessibility or validation issue arises from this?

Bootsrap

<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded">
  <figcaption class="figure-caption">Image caption</figcaption>
</figure>

A The image will automatically have a default alt text added.

B The browser throws a syntax error and does not render the image.

C The caption text will not display under the image.

D The image is ignored by screen readers, causing accessibility issues.

💡 Hint

Alt text is important for screen readers to describe images.

Without an alt attribute, screen readers cannot describe the image content, which harms accessibility. Browsers do not throw syntax errors for missing alt, and captions still display. No default alt text is added automatically.

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