Bootsrapmarkup~30 mins

Figure component in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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