Figures
Display related images and text with the figure component.
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
Aligning the figure’s caption is easy with our text utilities.
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.