Display images and text using the figure component.

Display a piece of content such as an image with an optional capture, using <figure>

Use the .figure, .figure-img and .figure-caption to provide some styling for the <figure>, <img> and <figurecaption> elements respectively.

Captions can be aligned using text utilities, such as .text-right.

A caption for the above image.

<figure class="figure">
  <img src="/solid/img/demo-article-2.jpg" class="figure-img w-50 rounded shadow" alt="...">
  <figcaption class="figure-caption text-left">A caption for the above image.</figcaption>

Read more