Estimated reading: 3 minutes 223 views

Bootstrap 5 – Figures: Captions and Images with Semantic Markup

Introduction – What Are Figures in Bootstrap 5?

A figure is a semantic HTML structure used to associate images with captions, commonly used in portfolios, documentation, blog posts, and galleries. Bootstrap 5 provides .figure and .figure-caption classes to style these elements easily while keeping the markup accessible and responsive.

In this guide, you’ll learn:

How to use <figure> and <figcaption> with Bootstrap
Apply .figure, .figure-img, and .figure-caption
Style and align captions effectively
Responsive layout tips with images and text

Basic Figure Example with Caption

<figure class="figure">
  <img src="image.jpg" class="figure-img img-fluid rounded" alt="A sample image">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>

Explanation:

Element/Class	Purpose
`<figure>`	Wraps image and caption semantically
`.figure`	Adds Bootstrap spacing and layout helpers
`.figure-img`	Applies max-width and responsive image styling
`.img-fluid`	Ensures image scales properly within container
`.rounded`	Optional border radius for aesthetics
`<figcaption>`	Provides the caption (usually below the image)
`.figure-caption`	Styles caption with smaller font and spacing

Example: Right-Aligned Caption

<figure class="figure text-end">
  <img src="right.jpg" class="figure-img img-fluid rounded" alt="Right aligned">
  <figcaption class="figure-caption">Right-aligned caption text.</figcaption>
</figure>

Output:

Caption aligns to the right using text-end
Great for descriptive notes or image attributions

Example: Figures Inside Grid Layout

<div class="row">
  <div class="col-md-6">
    <figure class="figure">
      <img src="left.jpg" class="figure-img img-fluid rounded" alt="Left">
      <figcaption class="figure-caption text-center">Centered caption</figcaption>
    </figure>
  </div>
  <div class="col-md-6">
    <figure class="figure text-end">
      <img src="right.jpg" class="figure-img img-fluid rounded" alt="Right">
      <figcaption class="figure-caption">Right caption</figcaption>
    </figure>
  </div>
</div>

Use Case:

Display side-by-side image+caption blocks
Perfect for testimonials, team members, or case studies

Best Practices for Bootstrap 5 Figures

Tip	Benefit
Always include `alt` text	Improves accessibility and SEO
Use `.img-fluid` for responsiveness	Prevents image overflow on small screens
Add `.rounded`, `.shadow`, or `.border`	Enhances visual presentation
Align caption using `text-*` utilities	For better layout flexibility
Combine with grid/flexbox	Enables responsive, multi-column figures

Summary – Clean, Semantic Visual Blocks with Bootstrap 5 Figures

Bootstrap 5 figures make it simple to display responsive images with well-styled captions in a semantic, accessible manner. With just a few utility classes, you can create beautiful content blocks for visual storytelling.

Key Takeaways:

Use <figure> + <figcaption> for semantic markup
.figure-img + .img-fluid ensure responsive scaling
.figure-caption adds small, padded text under the image
Combine with grid and alignment classes for full layout control

Perfect for portfolios, galleries, documentation, case studies, and news posts.

FAQs – Bootstrap 5 Figures

What is the purpose of .figure-caption in Bootstrap 5?
It provides default font size and spacing for the image caption under <figcaption>.

Is using <figure> better than <div> for images?
Yes. <figure> is semantic HTML5 that associates captions with visuals, improving accessibility and structure.

Can I have a responsive figure?
Yes. Use .img-fluid inside the figure to make the image scale with its container.

Can I place figures inside Bootstrap grid columns?
Absolutely. Figures can be used within .row and .col-* to build responsive layouts.

« Previous Next »

Share Now :