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.

Primary 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 & 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="/assets/img/tokyo-skyline.jpg"
    class="figure-img img-fluid rounded"
    alt="Tokyo skyline at dusk viewed from Shinjuku"
    width="800"
    height="533"
  />
  <figcaption class="figure-caption text-end">
    Tokyo skyline at dusk, Shinjuku District — © Kenji Mori 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 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.