Figure component in Bootsrap

Introduction

The Figure component helps you show images with captions in a neat and easy way.

When you want to add a photo with a description below it.

When you need to display a quote or illustration with a caption.

When you want your images and captions to look good on all screen sizes.

When you want to keep your page organized with consistent image styling.

Syntax

Bootsrap

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

The <figure> tag groups the image and caption together.

Use figure-img class for the image and figure-caption for the caption.

Examples

This shows a flower image with a caption below it.

Bootsrap

<figure class="figure">
  <img src="flower.jpg" class="figure-img img-fluid rounded" alt="A red flower">
  <figcaption class="figure-caption">A beautiful red flower.</figcaption>
</figure>

This example aligns the caption to the right using text-end.

Bootsrap

<figure class="figure">
  <img src="quote.png" class="figure-img img-fluid" alt="Quote image">
  <figcaption class="figure-caption text-end">A famous quote.</figcaption>
</figure>

Sample Program

This page shows the Bootstrap logo with a caption below it using the Figure component. The image is responsive and has rounded corners.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Figure Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-5">
    <h1>Figure Component Demo</h1>
    <figure class="figure">
      <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" class="figure-img img-fluid rounded" alt="Bootstrap Logo">
      <figcaption class="figure-caption">This is the Bootstrap logo.</figcaption>
    </figure>
  </main>
</body>
</html>

Important Notes

Always add an alt attribute to images for accessibility.

The img-fluid class makes images scale nicely on different screen sizes.

You can align captions using Bootstrap text alignment classes like text-center or text-end.

Summary

The Figure component groups images and captions together.

Use Bootstrap classes figure-img and figure-caption for styling.

It helps make images responsive and captions clear on all devices.

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