Bootstrap 4 - Figures

Статья, в которой рассматривается классы платформы 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 (демо)



   Bootstrap 0    3964 0

Комментарии (2)

  1. Владимир # 0
    Примечание: в Twitter Bootstrap 4 изображение, расположенное в HTML-элементе figure, автоматически становится адаптивным.
    Только если применить класс .img-rounded или .img-fluid к img.

    В bootstrap-4 для выравнивания текста используется класс вида .text-#-left; .text-#-right; .text-#-center. Для выравнивания во всех разрешениях и дивайсах, приходится создавать свой класс .text-left; .text-right; .text-center.
    1. Александр Мальцев # 0
      Спасибо за замечание. Да в Bootstrap 4 alpha2 действительно некоторые классы поменялись.
      На всех разрешениях достаточно будет использовать вместо # xs. Т.е. text-xs-left, text-xs-right и text-xs-center. В создании своих классов в этом случае нет необходимости.

    Вы должны авторизоваться, чтобы оставлять комментарии.