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-fluidensure responsive scaling.figure-captionadds 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.
Share Now :
