Estimated reading: 3 minutes 16 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 :