Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Figure & Caption in Bootstrap 5

Figure & Caption: Learn how to use Bootstrap's .figure component to add captions to images with proper semantic markup.

Why Use Figure & Caption?

The <figure> and <figcaption> elements provide semantic meaning to images with captions. Bootstrap enhances these with styling classes for consistent presentation.

❌ Without Figure

A beautiful landscape photograph

No semantic relationship

✅ With Figure

Proper semantic relationship

Basic Figure Component

Basic Figure Structure

Main figure image — A caption for the above image. This could include attribution, description, or additional context.

<!-- Basic figure component -->
<figure class="figure">
  <Image width={400} height={300} 
    src="image.jpg" 
    alt="Descriptive alt text"
    class="figure-img img-fluid rounded"
  />
  <figcaption class="figure-caption">
    A caption for the above image.
  </figcaption>
</figure>

<!-- Required classes:
- .figure: Container element
- .figure-img: Applied to the image
- .figure-caption: Applied to the caption
-->

Benefits of Using Figure Component:

Semantic HTML: Proper structure for screen readers
Styling consistency: Built-in spacing and typography
Responsive design: Works across all screen sizes
Easy customization: Extend with utility classes
SEO friendly: Clear relationship between image and caption

Caption Positioning

Caption Alignment Options

Left aligned — Left-aligned caption (default)

<!-- Left aligned (default) -->
<figcaption class="figure-caption text-start">
  Left-aligned caption
</figcaption>

<!-- Center aligned -->
<figcaption class="figure-caption text-center">
  Center-aligned caption
</figcaption>

<!-- Right aligned -->
<figcaption class="figure-caption text-end">
  Right-aligned caption
</figcaption>

Best Practice:

Match caption alignment with your content layout. Center alignment works well for standalone figures, while left/right alignment works better in flowing text.

Figure Sizing and Styling

Customizing Figure Appearance

With border — Figure with colored border

With background — Figure container with background

Circle image — Circular figure with caption

<!-- Figure with colored border -->
<figure class="figure">
  <Image width={400} height={300} 
    src="image.jpg" 
    class="figure-img img-fluid rounded border border-3 border-primary"
    alt="Image"
  />
  <figcaption class="figure-caption">
    Caption text
  </figcaption>
</figure>

<!-- Figure with shadow -->
<figure class="figure">
  <Image width={400} height={300} 
    src="image.jpg" 
    class="figure-img img-fluid rounded shadow"
    alt="Image"
  />
  <figcaption class="figure-caption">
    Caption text
  </figcaption>
</figure>

<!-- Figure container with background -->
<figure class="figure bg-light p-3 rounded">
  <Image width={400} height={300} 
    src="image.jpg" 
    class="figure-img img-fluid rounded"
    alt="Image"
  />
  <figcaption class="figure-caption">
    Caption text
  </figcaption>
</figure>

<!-- Circular figure -->
<figure class="figure">
  <Image width={400} height={300} 
    src="avatar.jpg" 
    class="figure-img img-fluid rounded-circle"
    alt="Avatar"
    width="200"
    height="200"
  />
  <figcaption class="figure-caption text-center">
    User profile picture
  </figcaption>
</figure>

Multiple Images in One Figure

Grouping Related Images

First image — Two related images showing different perspectives of the same subject. This could be before/after shots, different angles, or complementary visuals.

Second image — Two related images showing different perspectives of the same subject. This could be before/after shots, different angles, or complementary visuals.

<!-- Multiple images in one figure -->
<figure class="figure">
  <div class="row g-3">
    <div class="col-md-6">
      <Image width={400} height={300} 
        src="image1.jpg" 
        class="figure-img img-fluid rounded"
        alt="First image"
      />
    </div>
    <div class="col-md-6">
      <Image width={400} height={300} 
        src="image2.jpg" 
        class="figure-img img-fluid rounded"
        alt="Second image"
      />
    </div>
  </div>
  <figcaption class="figure-caption text-center mt-3">
    Caption for multiple related images
  </figcaption>
</figure>

<!-- Inline multiple images -->
<figure class="figure">
  <div class="d-flex gap-3">
    <Image width={400} height={300} 
      src="image1.jpg" 
      class="figure-img img-fluid rounded"
      alt="Image 1"
      style="width: 48%;"
    />
    <Image width={400} height={300} 
      src="image2.jpg" 
      class="figure-img img-fluid rounded"
      alt="Image 2"
      style="width: 48%;"
    />
  </div>
  <figcaption class="figure-caption">
    Side-by-side comparison
  </figcaption>
</figure>

When to Use Multiple Images:

Before/after comparisons
Product variations (different colors)
Step-by-step tutorials
Photo collections with shared context
Comparison charts or infographics

Figure with Extended Caption

Detailed Captions and Attribution

Detailed example — The Grand Canyon at Sunset
This photograph captures the breathtaking colors of the Grand Canyon during sunset. The layers of rock show millions of years of geological history.
**Photographer:** Jane Smith
**Location:** Grand Canyon National Park, Arizona
**Date:** June 15, 2023Landscape
**Equipment:** Canon EOS R5, 24-70mm f/2.8 lens
**Settings:** f/8, 1/125s, ISO 100

<!-- Figure with detailed caption -->
<figure class="figure">
  <Image width={400} height={300} 
    src="image.jpg" 
    class="figure-img img-fluid rounded shadow"
    alt="Detailed image"
  />
  <figcaption class="figure-caption">
    <h6 class="mb-2">Image Title</h6>
    <p class="mb-2">Detailed description of the image...</p>
    
    <div class="d-flex justify-content-between align-items-center">
      <span class="text-muted small">
        <strong>Photographer:</strong> Name<br>
        <strong>Location:</strong> Place<br>
        <strong>Date:</strong> Date
      </span>
      <span class="badge bg-info">Category</span>
    </div>
    
    <hr class="my-2">
    
    <div class="text-muted small">
      <strong>Equipment:</strong> Camera details<br>
      <strong>Settings:</strong> Technical details
    </div>
  </figcaption>
</figure>

Responsive Figure Layouts

Responsive Design Patterns

This demonstrates how a figure can float within text content. The figure aligns to the left with text flowing around it. This pattern works well for articles, blog posts, and documentation where you want to integrate images seamlessly with text.

The responsive behavior ensures that on smaller screens, the figure becomes full-width and the text stops wrapping around it. This maintains readability on mobile devices while providing an elegant layout on desktop.

Responsive Grid of Figures

<!-- Floating figure in text -->
<figure class="figure float-start me-3 mb-3" style="max-width: 300px">
  <Image width={400} height={300} 
    src="image.jpg" 
    class="figure-img img-fluid rounded"
    alt="Floating image"
  />
  <figcaption class="figure-caption">
    Caption text
  </figcaption>
</figure>

<!-- Responsive grid of figures -->
<div class="row g-3">
  <div class="col-md-4">
    <figure class="figure">
      <Image width={400} height={300} 
        src="image1.jpg" 
        class="figure-img img-fluid rounded"
        alt="Image 1"
      />
      <figcaption class="figure-caption">
        Caption 1
      </figcaption>
    </figure>
  </div>
  <div class="col-md-4">
    <figure class="figure">
      <Image width={400} height={300} 
        src="image2.jpg" 
        class="figure-img img-fluid rounded"
        alt="Image 2"
      />
      <figcaption class="figure-caption">
        Caption 2
      </figcaption>
    </figure>
  </div>
  <div class="col-md-4">
    <figure class="figure">
      <Image width={400} height={300} 
        src="image3.jpg" 
        class="figure-img img-fluid rounded"
        alt="Image 3"
      />
      <figcaption class="figure-caption">
        Caption 3
      </figcaption>
    </figure>
  </div>
</div>

<!-- Clear float -->
<div class="clearfix"></div>

Figure with Interactive Elements

Interactive Figure Components

Card figure — Card-Style Figure
Combining figure with card component for enhanced layout.
Photo by: AuthorView

Accessibility Considerations

Making Figures Accessible

✅ Good Accessibility Practices:

Always use descriptive alt text
Ensure sufficient color contrast
Use semantic <figure> and <figcaption>
Provide text alternatives for complex images
Test with screen readers

❌ Common Accessibility Issues:

Empty or generic alt text
Images of text without alternatives
Low contrast between text and background
Missing figure semantics
Inaccessible interactive elements

Example of Accessible Figure:

Bar chart showing quarterly sales growth: Q1 $50K, Q2 $75K, Q3 $90K, Q4 $120K — **Figure 1:** Quarterly sales growth for 2023 showing steady increase throughout the year. Data available in table format below.

<!-- Accessible figure example -->
<figure class="figure" aria-labelledby="fig1-caption">
  <Image width={400} height={300} 
    src="chart.jpg" 
    alt="Bar chart showing quarterly sales growth: 
         Q1 $50K, Q2 $75K, Q3 $90K, Q4 $120K"
    class="figure-img img-fluid rounded"
  />
  <figcaption id="fig1-caption" class="figure-caption">
    <strong>Figure 1:</strong> Quarterly sales growth for 2023 
    showing steady increase throughout the year. 
    Data available in table format below.
  </figcaption>
</figure>

<!-- Additional accessibility tips -->
- Use aria-labelledby to associate caption
- Provide detailed alt text for complex images
- Ensure color contrast meets WCAG guidelines
- Test keyboard navigation for interactive figures

Best Practices and Common Patterns

Figure & Caption Best Practices

Always use semantic markup: <figure> and <figcaption>
Descriptive alt text: Convey the purpose and content of the image
Consistent styling: Use the same figure styles throughout your site
Responsive design: Ensure figures work well on all screen sizes
Clear relationship: Keep captions close to their corresponding images
Avoid redundancy: Don't repeat caption text in alt attributes
Numbering for sequences: Use numbers for figures in tutorials/documentation
Attribution when needed: Credit photographers, artists, or sources

Common Use Cases:

📝 Articles & Blogs

Enhance written content with relevant images and captions

📚 Documentation

Numbered figures for tutorials and guides

🖼️ Portfolios

Showcase work with professional descriptions

📊 Data Visualization

Charts and graphs with explanatory captions

🏛️ Academic Papers

Formatted figures with proper citations

🛒 E-commerce

Product images with feature descriptions

When NOT to Use Figures

❌ Decorative images without meaningful captions
❌ Logo images in headers/navigation
❌ Background images or purely decorative elements
❌ Icons used as UI controls
❌ Images that are already adequately described in surrounding text

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial