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

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

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

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

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

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

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

В качестве примера рассмотрим элемент <figure>, состоящий из изображения <img> и текстового заголовка <figcaption>.

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

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

Элемент <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>