Figures

Display related images and text with the figure component.

Page Contents

How it Works

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

Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it resize automatically.

Examples

A generic square placeholder image with rounded corners in a figure. — A caption for the above image.

<figure class="figure">
  <img src="..." class="figure-img img-fluid radius" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Aligning the figure's caption is easy with our text utilities.

<figure class="figure">
  <img src="..." class="figure-img img-fluid radius" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for the figure CSS styles.

Name	Type	Default	Description
`$enable-figure`	boolean	`true`	Enable the generation of the figure CSS classes.
`$figure-spacer-y`	string	`.5rem`	Figure element vertical spacing between image and caption.
`$figure-caption-font-size`	string	`.875em`	Figure caption font size.
`$figure-caption-color`	string	`$uibase-500`	Figure caption text color.

Mixins

No mixins available.