Контент

Стили для отображения содержимого с часто используемыми элементами HTML, включая типографику, изображения, таблицы и многое другое.

Изображения

Выбирайте изображения в адаптивном поведении (чтобы они никогда не становились большими, чем их родительские элементы) и добавляйте к ним легкие стили - все через классы.

Адаптивные изображения

Изображения в Bootstrap становятся адаптивными с .img-fluid. max-width: 100%; и height: auto;, которые применяются к изображению так, чтобы оно масштабировалось с родительским элементом.

<img src="..." class="img-fluid" alt="Responsive image">

Изображения SVG и IE 9-10

В Internet Explorer 9-10 изображения SVG с .img-fluid непропорционально велики. Чтобы исправить это, добавьте width: 100% \9; где необходимо. Это исправление неправильно изменяет размер у других форматов изображений, поэтому Bootstrap не применяет его автоматически.

Уменьшенное изображение

В дополнение к нашим утилитам border-radius, вы можете использовать .img-thumbnail чтобы придать изображению округленный внешний вид границы 1px.

<img src="..." alt="..." class="img-thumbnail">

Выравнивание изображений

Выровняйте изображения с помощью классов-помощников или классов выравнивания текста. block-level изображения могут быть центрированы с использованием the .mx-auto margin utility class.

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>