Bootstrap Figures

Bootstrap Figures Overview

HTML's native <figure> and <figcaption> elements already provide semantic meaning for self-contained content like images with captions. Bootstrap's figure classes—figure, figure-img, and figure-caption—apply consistent spacing and typography to that native markup without changing its meaning.

Because figure-img typically pairs with img-fluid and rounded, figures inherit the same responsive scaling and shape utilities used elsewhere for images, making them easy to combine with galleries, articles, and cards.

Bootstrap Figures Example

<figure class="figure">
  <img src="chart.png" class="figure-img img-fluid rounded" alt="Quarterly revenue chart">
  <figcaption class="figure-caption text-center">
    Fig. 1 — Quarterly revenue growth, 2024–2025.
  </figcaption>
</figure>

The outer figure element groups the image and caption as one semantic unit. figure-img combines with img-fluid and rounded for a responsive, softly rounded image, while figure-caption styles the figcaption text as small, muted, and centered.

Top 10 Bootstrap Figures Examples

These are the figure component patterns you'll use when pairing images with captions.

Popular Real-World Bootstrap Figures Examples

These figure patterns commonly appear in articles, documentation, and portfolio galleries.

Best Practices

• Use the native figure and figcaption elements instead of generic divs for semantic correctness.
• Combine figure-img with img-fluid so figure images remain responsive.
• Keep captions short and descriptive; they should add context, not repeat the alt text verbatim.
• Use text-center or text-end on figure-caption to match the surrounding page's alignment style.
• Group multiple figures in a grid using the standard row/column system for galleries.
• Still provide meaningful alt text on the image even though a caption is present.
• Use figure for content that truly stands alone from the main flow, like charts or diagrams.

Common Mistakes

• Using a generic div instead of the semantic figure/figcaption elements.
• Duplicating the alt text and caption verbatim instead of giving each a distinct purpose.
• Forgetting img-fluid on figure-img, letting large images overflow their container.
• Not aligning captions consistently with the rest of the page's typography style.
• Wrapping unrelated content in a figure element when it isn't self-contained illustrative content.
• Skipping figcaption entirely and placing caption text outside the figure element.

Key Takeaways

• The figure component pairs semantic figure/figcaption markup with Bootstrap styling.
• figure-img typically combines with img-fluid and shape utilities like rounded.
• figure-caption provides consistent small, muted caption typography.
• Figures work well in grids for galleries, portfolios, and documentation.
• Meaningful alt text and captions serve different but complementary purposes.