Bootstrap 6 Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>. For images without a caption, see Images.

Basic example

Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. .figure is an inline flex column, so it shrinks to the width of the image, the caption lines up with it, and --cui-figure-gap spaces the two apart. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img /> to make it responsive.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Aligning the caption

Aligning the figure’s caption is easy with our text utilities. Because the figure is only as wide as its image, the caption aligns against the image rather than the page.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Customizing

CSS variables

Each part declares what it reads: .figure the gap between image and caption, .figure-caption its own size and colour. That is why a caption works the same inside a .figure or on its own:

$figure-tokens: defaults(
  (
    --cui-figure-gap: var(--cui-spacer-3),
  ),
  $figure-tokens
);

$figure-caption-tokens: defaults(
  (
    --cui-figure-caption-font-size: var(--cui-small-font-size),
    --cui-figure-caption-color: var(--cui-fg-3),
  ),
  $figure-caption-tokens
);