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.