Figure component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Bootstrap figure component?

The Bootstrap figure component is used to display images with optional captions in a clean, semantic way. It groups an image and its caption together for better structure and styling.

beginner

Which Bootstrap class is used to style the caption text inside a <code>figure</code>?

The class figure-caption is used to style the caption text inside a figure component.

beginner

How do you make a responsive image inside a Bootstrap figure?

Add the Bootstrap class img-fluid to the <img> tag inside the figure. This makes the image scale nicely on different screen sizes.

beginner

Write the basic HTML structure of a Bootstrap figure with an image and a caption.

Use this structure: <figure class="figure"> <img src="image.jpg" class="figure-img img-fluid rounded" alt="Description"> <figcaption class="figure-caption">Caption text here.</figcaption> </figure>

beginner

Why should you always include the alt attribute on images inside a figure?

The alt attribute provides alternative text for screen readers and helps with accessibility. It describes the image content for users who cannot see it.

Which HTML element is used to group an image and its caption in Bootstrap's figure component?

A &lt;div&gt;

B &lt;section&gt;

C &lt;figure&gt;

D &lt;article&gt;

The <figure> element semantically groups an image and its caption.

What class should you add to an image inside a figure to make it responsive in Bootstrap?

A img-responsive

B img-rounded

C img-thumbnail

D img-fluid

The class img-fluid makes images scale nicely to the parent container.

Which class styles the caption text inside a Bootstrap figure?

A caption-text

B figure-caption

C img-caption

D text-caption

The figure-caption class is used for caption styling.

What is the correct way to add a caption inside a figure?

A &lt;figcaption&gt;Caption&lt;/figcaption&gt;

B &lt;div class='caption'&gt;Caption&lt;/div&gt;

C &lt;caption&gt;Caption&lt;/caption&gt;

D &lt;p class='caption'&gt;Caption&lt;/p&gt;

The <figcaption> element is the semantic way to add captions inside <figure>.

Why is it important to include the alt attribute on images?

A For accessibility and screen readers

B To add a tooltip

C For SEO only

D To change image size

The alt attribute helps screen readers describe images to users who cannot see them.

Explain how to create a Bootstrap figure component with an image and caption that works well on all screen sizes.

Think about grouping, responsive images, and caption styling.

Describe why semantic HTML elements like figure and figcaption are important in web development.

Consider how these elements help both users and search engines.