Adding figures and images to articles

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>.

This is a caption for the image.

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

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

This is a caption for the image.

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

Image styles

Images often play an important role in content, providing useful information and helping to illustrate points. Images can be displayed within <figure> elements and given an optional caption using the <figcaption> element.

A full-width centered image

Using a few simple class names, you can change the alignment of your images and even have them extend slightly beyond the content area for added effect.

A left-aligned image

Use .float-left to have an image float to the left of the content. Responsive variants allow you to control the float based on screen size.

There should be some space above, below and on the appropriate side of the image to ensure separation between the image and surrounding text. This will make the page look better and improve readability.

Margin utilities allow you to apply spacing around the image and reposition the element on larger screen sizes. Text alignment utilities can be used to control the alignment of the caption.

The left-aligned example uses .my-5 and .lg:mr-6 to apply margin around the entire element and lg:-ml-6 to shift the image further to the left on large screen sizes.

Use .float-right to achieve a similar (but opposite) effect. Consider using other utilities, for example borders and background colors, to add further interest to your images or apply your own styles to figures or images within the content area (.content) using custom CSS.

When floating elements it may occasionally be necessary to use .clearfix to ensure content remains within the content area.