Цифры

Документация и примеры для отображения связанных изображений и текста с компонентом рисунка в Bootstrap.

На этой странице

В любое время, когда вам нужно отобразить часть содержимого, например изображение с необязательным заголовком, рассмотрите возможность использования файла <figure>.

Используйте включенные классы и .figure, чтобы предоставить некоторые базовые стили для HTML5 и элементов. Изображения на рисунках не имеют явного размера, поэтому обязательно добавьте класс в свой , чтобы сделать его адаптивным..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

Подпись к изображению выше.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Выровнять подпись к рисунку легко с помощью наших текстовых утилит .

Подпись к изображению выше.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Сасс

Переменные

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;