Figure component in Bootsrap - Mini Project: Build & Apply

Bootstrap Figure Component

📖 Scenario: You are creating a simple webpage to display an image with a caption using Bootstrap's figure component. This is common for showing photos with descriptions on blogs or portfolios.

🎯 Goal: Build a Bootstrap figure component that shows an image with a caption below it. The caption should be centered and styled properly.

📋 What You'll Learn

Use the <figure> element with the Bootstrap class figure.

Include an <img> inside the figure with the class figure-img and img-fluid for responsiveness.

Add a <figcaption> with the class figure-caption and center the text.

Use Bootstrap 5 classes only, no custom CSS.

Ensure the HTML document has proper lang, charset, and viewport meta tags.

💡 Why This Matters

🌍 Real World

Figures with captions are common in blogs, portfolios, and product pages to show images with descriptions clearly and accessibly.

💼 Career

Knowing how to use Bootstrap components like figure helps you quickly build professional-looking, responsive web pages that are easy to maintain.

1

Create the basic HTML structure

Write the basic HTML5 document structure with lang="en", charset="UTF-8", and a viewport meta tag for responsive design. Include the Bootstrap 5 CSS CDN link inside the <head>. Add an empty <body> section.

Bootsrap

Hint

Remember to include the Bootstrap CSS link from the official CDN inside the <head> section.

2

Add the figure element with image

Inside the <body>, add a <figure> element with the class figure. Inside it, add an <img> tag with the classes figure-img and img-fluid. Set the image src attribute to https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg and alt text to Bootstrap logo.

Bootsrap

    
    
    Bootstrap Figure Example
    


    

Hint

Use the figure class on the <figure> tag and add the image with the required classes and attributes.

3

Add the caption below the image

Inside the existing <figure>, add a <figcaption> element with the class figure-caption. Write the text Bootstrap logo inside it. Also add the class text-center to center the caption text.

Bootsrap

    
    
    Bootstrap Figure Example
    


    
        
        
    

Hint

Use the figcaption tag with the classes figure-caption and text-center inside the figure.

4

Add a container and center the figure on the page

Wrap the <figure> element inside a <div> with the Bootstrap class container. Also add the classes d-flex, justify-content-center, and mt-5 to this div to center the figure horizontally and add margin on top.

Bootsrap

    
    
    Bootstrap Figure Example
    


    
    
        
        Bootstrap logo
    

Hint

Use a div with the classes container d-flex justify-content-center mt-5 to center the figure and add spacing.

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