Классы Bootstrap для стилизации figure и figcaption

В этой статье познакомимся с классами фреймворка Bootstrap 4, предназначенными для добавления базовых CSS стилей к HTML элементу figure.

Назначение HTML элемента figure

Элемент figure был добавлен в HTML5 и предназначен для разметки контента (изображения, таблицы, фрагмента кода), смысл которого может быть понятен и вне документа, в котором он расположен.

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

Классы Bootstrap, добавляющие к элементу figure стили

В Bootstrap 4 имеются стили для базового оформления HTML элемента figure.

В качестве примера рассмотрим элемент figure, состоящий из изображения (img) и текстового заголовка (figure-caption).

Для применения этих стилей необходимо выполнить следующее:

• добавить класс figure к html-элементу figure;
• добавить класс figure-img к элементу img;
• добавить класс figure-caption к элементу figure-caption.

Элемент figure, имеющий базовое оформление:

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

Во фреймворке Bootstrap 4 изображение, помещённое в HTML-элемент figure, автоматически не становится адаптивным. Поэтому, кроме figure-img к тегу img необходимо добавить ещё класс img-fluid.

HTML код элемента figure, изображение которого имеет скруглённые углы:

<figure class="figure">
    <!-- Углы изображения скруглены с помощью стилей, добавленных к нему посредством класса rounded -->
    <img src="image.png" class="img-fluid figure-img rounded" alt="">
    <figcaption class="figure-caption">Описание рисунка</figcaption>
</figure>

Выравнивание текстовой надписи

Выровнять надпись figcaption относительно изображения, расположенного в figure, можно с помощью одного из следующих классов:

• text-left (по левому краю);
• text-center (по центру);
• text-right (по правому краю).

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

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

Figure с текстовой надписью figcaption, выровненной по центру:

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