Sections

Figures

The <figure> HTML element is for displaying related images and text.

Use the <figure> element to display self-contained content, like illustrations, images, photos or code. For image-specific styles, refer to the Images page.

Usage

Use the <figcaption> element to display a caption for a given <figure>.

400x300
This is a caption for the image.
<figure>
  <img class="img-fluid" src="..." alt="...">
  <figcaption>This is a caption for the image.</figcaption>
</figure>

Use text align utilities to align the caption relative to the image.

400x300
This is a caption for the image.
<figure>
  <img class="img-fluid" src="..." alt="...">
  <figcaption class="text-right">This is a caption for the image.</figcaption>
</figure>

Customization

The following Sass variables are available in the framework:

Variable Description
$margin-figure The margin applied to the <figure> element.
$color-figcaption The color of the <figcaption> element.