Bootstrap 5Content

Bootstrap 5 Figure

The Bootstrap 5 Figure component provides semantic HTML structure for displaying an image alongside a caption using the <figure> and <figcaption> elements. It uses the .figure, .figure-img, and .figure-caption classes to apply consistent spacing, sizing, and typography. Use it whenever an image needs contextual text that describes or credits it — such as in articles, portfolios, or product documentation.

Primary Class

.figure

Common Use Cases

→Displaying a product photograph in an e-commerce article with a caption crediting the photographer or describing the product angle
→Embedding a chart or data visualisation in a blog post with a caption explaining what the data represents
→Showcasing a before-and-after image in a case study with a caption noting the date or transformation context
→Presenting architectural or design mockups in a portfolio with captions identifying the project name, year, and client

Variants & Classes

Variant	Description	Classes
Figure Default	Standard figure with Bootstrap's default styling.	`figure`
Figure Responsive	Responsive variant that adapts to different screen sizes.	`figure figure-responsive`

Code Example

<figure class="figure">
  <img
    src="/img/northern-lights-iceland.jpg"
    class="figure-img img-fluid rounded"
    alt="Aurora borealis over a frozen lake in Iceland"
  />
  <figcaption class="figure-caption text-end">
    Aurora borealis, Þingvellir National Park, Iceland — March 2023
  </figcaption>
</figure>

Live Examples

Basic Figure

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated figure with custom colours
✓Figure with interactive states
✓Responsive figure for all screen sizes

Best Practices

Always add .img-fluid to prevent overflow

The .figure-img class only adds a small margin-bottom; it does not constrain width. Pair it with .img-fluid so the image scales correctly inside narrow columns or mobile viewports.

Align the caption to match the image alignment

Bootstrap's text utility classes work directly on .figure-caption. Use .text-end when your figure is right-aligned, or .text-center when the figure is centred — this keeps caption and image visually anchored together.

Use the semantic <figure> element, not a <div>

Screen readers and search engines interpret <figure> as self-contained media content. Swapping it for a <div class="figure"> breaks that semantic meaning even though the visual output looks identical.

Control figure width with column or utility classes on the parent

The figure element is block-level by default. Wrap it in a .col-md-6 or apply .w-50 .mx-auto to constrain it — the image and caption will stay proportional without extra custom CSS.

FAQ

What is the difference between using <figure> with Bootstrap and just wrapping an image in a <div>?

The <figure> element carries semantic meaning defined in the HTML5 spec — it marks content as a self-contained unit that is referenced from the main flow but could be moved without affecting meaning, like an illustration or code snippet. Bootstrap's .figure class simply adds display: inline-block and a small margin so the element behaves predictably. Using a plain <div> loses the semantic signal for assistive technologies and search engine crawlers, which may interpret figure content as contextually related media with its caption.

How do I style the caption text colour or size to match my brand?

Bootstrap's .figure-caption applies color: var(--bs-secondary-color) and a slightly smaller font size by default. You can override this with utility classes directly on the element — for example, .figure-caption.text-primary.small — or override the CSS variable --bs-secondary-color in your :root or a scoped selector. For a persistent brand override, set $figure-caption-color and $figure-caption-font-size in your Sass variables before compiling Bootstrap.

How does Canvas Builder handle Figure components when generating a page?

When you describe an image-with-caption layout in Canvas Builder, it outputs a fully formed <figure> block using .figure, .figure-img, and .figure-caption with your brand's colour tokens applied to the caption via CSS custom properties. The generated HTML includes .img-fluid by default, ensuring responsive behaviour without extra configuration, and alt text is prompted as a required field so accessibility is baked in from the start.