Статья, в которой рассматривается классы платформы Bootstrap 4 для оформления HTML-элементов figure и figcaption.

HTML-элемент figure представляет собой некоторый контент (изображение, таблицу, фрагмент кода), смысл содержимого которого можно понять вне документа, где он расположен. Обычно контент элемента figure сопровождается текстовой надписью, которая размечается с помощью элемента figcaption.

Оформление элементов figure и figure-caption в Twitter Bootstrap 4 осуществляется с помощью классов .figure и .figure-caption, каждый из которых необходимо добавить к соответствующему HTML-элементу.

Примечание: в Twitter Bootstrap 4 изображение, расположенное в HTML-элементе figure, автоматически становится адаптивным.

Например, создать элемент figure, содержащий изображение и текстовую надпись (figcaption), имеющую оформление Twitter Bootstrap 4:

<!--Элемент figure с классом Bootstrap figure-->
<figure class="figure">
  <!--Изображение-->
  <img src="image.png" class="img-rounded" alt="">
  <!--Текстовая надпись к рисунку-->
  <figcaption class="figure-caption">Текстовая надпись к рисунку</figcaption>
</figure>

Выровнять текстовую надпись figcaption по левому, по правому краю или посередине относительно контента элемента figure можно с помощью классов платформы Twitter Bootstrap 4, предназначенных для выравнивания текста (.text-left, .text-center, .text-right).

Например, выровнять текстовую надпись figcaption относительно контента figure по левому краю:

<figure class="figure">
  <img src="image.png" class="img-rounded" alt="">
  <!--Текстовая надпись, выровненная по левому краю относительно рисунка-->
  <figcaption class="figure-caption text-left">...</figcaption>
</figure>

Bootstrap 4 - Элемент figure с текстовой надписью, выровненной по левому краю

Например, выровнять текстовую надпись figcaption относительно контента figure посередине:

<figure class="figure">
  <img src="image.png" class="img-rounded" alt="">
  <!--Текстовая надпись, выровненная посередине относительно рисунка-->
  <figcaption class="figure-caption text-center">...</figcaption>
</figure>

Bootstrap 4 - Элемент figure с текстовой надписью, выровненной посередине

Например, выровнять текстовую надпись figcaption относительно контента figure по правому краю:

<figure class="figure">
  <img src="image.png" class="img-rounded" alt="">
  <!--Текстовая надпись, выровненная по правому краю относительно рисунка-->
  <figcaption class="figure-caption text-right">...</figcaption>
</figure>

Bootstrap 4 - Элемент figure с текстовой надписью, выровненной по правому краю

Bootstrap 4 - Figures (демо)