Bootstrap 5Content

Bootstrap 5 Figure

The Bootstrap 5 Figure component provides semantic HTML structure for displaying images or illustrations alongside a caption using the <figure> and <figcaption> elements styled with .figure, .figure-img, and .figure-caption classes. It handles responsive image sizing and consistent caption typography out of the box. Use it whenever an image requires descriptive context: product shots, charts, editorial photography, or any visual that benefits from a direct label.

Bootstrap class

.figure

Common use cases

Displaying a product photograph with a caption identifying the model name and SKU on an e-commerce detail page
Presenting a data chart or infographic in a blog post with a caption citing the data source
Showcasing portfolio work in a case study with a caption describing the project and year
Embedding a map screenshot in a location or venue page with a caption noting the address or neighbourhood

Variants and classes

Variant	Description and classes	Classes
Basic figure	Image with a caption underneath.`figure + figure-img img-fluid rounded + figure-caption`	`figure + figure-img img-fluid rounded + figure-caption`
Caption alignment	Right-aligned or centred caption.`figure-caption text-end / text-center`	`figure-caption text-end / text-center`
Embedded media	Video or iframe with a caption.`figure + ratio ratio-16x9`	`figure + ratio ratio-16x9`

Code example

HTML

<figure class="figure">
  <img
    src="https://picsum.photos/seed/cb-figure/800/533"
    class="figure-img img-fluid rounded"
    alt="Sample landscape photo"
    width="800"
    height="533"
  />
  <figcaption class="figure-caption text-end">
    A caption describes the image and credits its source.
  </figcaption>
</figure>

Live examples

Basic Figure

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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

Best practices

Always include descriptive alt text alongside the caption

The .figure-caption is visible text for sighted users, but the img alt attribute serves screen readers. They serve different accessibility roles, so both should be present and meaningful rather than identical.

Use .text-end or .text-center on .figure-caption to align with the image edge

By default captions are left-aligned; adding .text-end mirrors the convention used in print editorial layouts and visually ties the caption to the right edge of the image.

Pair .img-fluid with a max-width utility to constrain oversized figures

Adding style="max-width: 640px;" or a utility class like .w-75 on the <figure> element itself prevents full-bleed figures in wide containers without breaking responsive scaling on small screens.

Nest figures inside Bootstrap grid columns for multi-image layouts

Wrapping each <figure class="figure"> inside a .col element lets you build side-by-side comparison figures, useful for before/after product shots or multi-angle portfolio views, without writing any custom CSS.

FAQ

What is the difference between using a plain <img> tag and the Bootstrap Figure component?

A plain <img> tag gives you no semantic relationship between the image and any descriptive text. The Figure component uses the native HTML <figure> and <figcaption> elements, which communicate to browsers, search engines, and assistive technologies that the caption is directly associated with that specific image. Bootstrap's .figure-img class also applies display: block and margin-bottom: 0.5rem automatically, so the caption sits flush below the image without extra CSS.

How can I customise the caption colour and font size without overriding Bootstrap's source files?

Bootstrap sets .figure-caption to a muted grey using the CSS variable --bs-secondary-color and a font-size of 0.875em. You can override these scoped to your figure in a local stylesheet: .figure-caption { color: #4a4a4a; font-size: 0.8rem; font-style: italic; }. Alternatively, add Bootstrap utility classes directly in the markup, for example class="figure-caption text-primary fs-6", to use your theme's primary brand colour and a specific type scale step.

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

Canvas Builder outputs fully structured <figure> markup with .figure, .figure-img, and .figure-caption classes applied automatically based on your prompt. It injects your brand's primary colour into caption text via Bootstrap CSS custom properties, sets the alt attribute from the image description you provide, and wraps the figure in the appropriate grid column so it's responsive from the moment the HTML is generated, no post-editing required.