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.

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