Карточки

Карточки Bootstrap предоставляют гибкий и расширяемый контейнер содержимого с множественными вариантами и опциями.

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

О карточках

Карточка - это гибкий и расширяемый контейнер содержимого. Она включает опции для заголовков и подвалов, широкое разнообразие содержимого, контекстные цвета фона и мощные опции отображения. Если вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, колодцы и миниатюры. Аналогичная функциональность этим компонентам доступна как модификаторные классы для карточек.

Пример

Карточки построены с минимальной разметкой и стилями, но все же умудряются предоставить тонну контроля и настройки. Построенные с flexbox, они предлагают легкое выравнивание и хорошо смешиваются с другими компонентами Bootstrap. У них нет margin по умолчанию, поэтому используйте утилиты отступов по мере необходимости.

Ниже приведен пример базовой карточки со смешанным содержимым и фиксированной шириной. Карточки не имеют фиксированной ширины для начала, поэтому они естественно заполняют полную ширину своего родительского элемента. Это легко настраивается с помощью наших различных опций размеров.

Заголовок карточки

Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.

Куда-то пойти

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

Типы содержимого

Карточки поддерживают широкое разнообразие содержимого, включая изображения, текст, группы списков, ссылки и многое другое. Ниже приведены примеры того, что поддерживается.

Тело

Строительным блоком карточки является .card-body. Используйте его всякий раз, когда вам нужен отступный раздел внутри карточки.

Это некоторый текст внутри тела карточки.

html

<div class="card">
  <div class="card-body">
    Это некоторый текст внутри тела карточки.
  </div>
</div>

Заголовки, текст и ссылки

Заголовки карточек используются путем добавления .card-title к тегу <h*>. Точно так же ссылки добавляются и размещаются рядом друг с другом путем добавления .card-link к тегу <a>.

Подзаголовки используются путем добавления .card-subtitle к тегу <h*>. Если элементы .card-title и .card-subtitle размещены в элементе .card-body, заголовок и подзаголовок карточки красиво выровнены.

Заголовок карточки

Подзаголовок карточки

Ссылка карточки Другая ссылка

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Подзаголовок карточки</h6>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
    <a href="#" class="card-link">Ссылка карточки</a>
    <a href="#" class="card-link">Другая ссылка</a>
  </div>
</div>

Изображения

.card-img-top и .card-img-bottom соответственно устанавливают верхние и нижние углы скругленными, чтобы соответствовать границам карточки. С .card-text можно добавить текст к карточке. Текст внутри .card-text также можно стилизовать стандартными HTML тегами.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>

Группы списков

Создавайте списки содержимого в карточке с помощью группы списков без отступов.

Элемент
Второй элемент
Третий элемент

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Элемент</li>
    <li class="list-group-item">Второй элемент</li>
    <li class="list-group-item">Третий элемент</li>
  </ul>
</div>

Рекомендуемое

Элемент
Второй элемент
Третий элемент

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Рекомендуемое
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Элемент</li>
    <li class="list-group-item">Второй элемент</li>
    <li class="list-group-item">Третий элемент</li>
  </ul>
</div>

Элемент
Второй элемент
Третий элемент

Подвал карточки

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Элемент</li>
    <li class="list-group-item">Второй элемент</li>
    <li class="list-group-item">Третий элемент</li>
  </ul>
  <div class="card-footer">
    Подвал карточки
  </div>
</div>

Кухонная мойка

Смешивайте и сочетайте множественные типы содержимого для создания карточки, которая вам нужна, или бросайте все туда. Показано ниже стили изображений, блоки, стили текста и группа списков — все обернуто в карточку фиксированной ширины.

Заголовок карточки

Элемент
Второй элемент
Третий элемент

Ссылка карточки Другая ссылка

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Элемент</li>
    <li class="list-group-item">Второй элемент</li>
    <li class="list-group-item">Третий элемент</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Ссылка карточки</a>
    <a href="#" class="card-link">Другая ссылка</a>
  </div>
</div>

Заголовок и подвал

Добавьте необязательный заголовок и/или подвал внутри карточки.

Рекомендуемое

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

html

<div class="card">
  <div class="card-header">
    Рекомендуемое
  </div>
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

Заголовки карточек можно стилизовать, добавив .card-header к элементам <h*>.

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

html

<div class="card">
  <h5 class="card-header">Рекомендуемое</h5>
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

Цитата

Известная цитата, содержащаяся в элементе blockquote.

html

<div class="card">
  <div class="card-header">
    Цитата
  </div>
  <div class="card-body">
    <figure>
      <blockquote class="blockquote">
        <p>Известная цитата, содержащаяся в элементе blockquote.</p>
      </blockquote>
      <figcaption class="blockquote-footer">
        Кто-то известный в <cite title="Название источника">Название источника</cite>
      </figcaption>
    </figure>
  </div>
</div>

Рекомендуемое

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

2 дня назад

html

<div class="card text-center">
  <div class="card-header">
    Рекомендуемое
  </div>
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
  <div class="card-footer text-body-secondary">
    2 дня назад
  </div>
</div>

Размеры

Карточки не предполагают конкретную width для начала, поэтому они будут 100% ширины, если не указано иное. Вы можете изменить это по мере необходимости с помощью пользовательского CSS, классов сетки, Sass миксинов сетки или утилит.

Используя разметку сетки

Используя сетку, оберните карточки в столбцы и строки по мере необходимости.

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

html

<div class="row">
  <div class="col-sm-6 mb-3 mb-sm-0">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Особое обращение к заголовку</h5>
        <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
        <a href="#" class="btn btn-primary">Куда-то пойти</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Особое обращение к заголовку</h5>
        <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
        <a href="#" class="btn btn-primary">Куда-то пойти</a>
      </div>
    </div>
  </div>
</div>

Используя утилиты

Используйте нашу горстку доступных утилит размеров для быстрой установки ширины карточки.

Заголовок карточки

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Кнопка

Заголовок карточки

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Кнопка

html

<div class="card w-75 mb-3">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Кнопка</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Кнопка</a>
  </div>
</div>

Используя пользовательский CSS

Используйте пользовательский CSS в ваших таблицах стилей или как встроенные стили для установки ширины.

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

Выравнивание текста

Вы можете быстро изменить выравнивание текста любой карточки — полностью или в определенных частях — с помощью наших классов выравнивания текста.

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

html

<div class="card mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

<div class="card text-center mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Активная</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Ссылка</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Отключена</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

Особое обращение к заголовку

С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Куда-то пойти

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Активная</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Ссылка</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Отключена</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Особое обращение к заголовку</h5>
    <p class="card-text">С поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
    <a href="#" class="btn btn-primary">Куда-то пойти</a>
  </div>
</div>

Изображения

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

Колпачки изображений

Аналогично заголовкам и подвалам, карточки могут включать верхние и нижние "колпачки изображений" — изображения в верхней или нижней части карточки.

Заголовок карточки

Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.

Последнее обновление 3 минуты назад

Заголовок карточки

Последнее обновление 3 минуты назад

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
    <p class="card-text"><small class="text-body-secondary">Последнее обновление 3 минуты назад</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
    <p class="card-text"><small class="text-body-secondary">Последнее обновление 3 минуты назад</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Наложения изображений

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

Заголовок карточки

Последнее обновление 3 минуты назад

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
    <p class="card-text"><small>Последнее обновление 3 минуты назад</small></p>
  </div>
</div>

Обратите внимание, что содержимое не должно быть больше высоты изображения. Если содержимое больше изображения, содержимое будет отображаться вне изображения.

Горизонтальные

Используя комбинацию классов сетки и утилит, карточки могут быть сделаны горизонтальными в мобильно-дружественном и адаптивном способе. В примере ниже мы удаляем желоба сетки с помощью .g-0 и используем классы .col-md-* для создания карточки горизонтальной в контрольной точке md. Дальнейшие настройки могут потребоваться в зависимости от содержимого вашей карточки.

Заголовок карточки

Последнее обновление 3 минуты назад

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
        <p class="card-text"><small class="text-body-secondary">Последнее обновление 3 минуты назад</small></p>
      </div>
    </div>
  </div>
</div>

Стили карточек

Карточки включают различные опции для настройки их фонов, границ и цветов.

Фон и цвет

Добавлено в v5.2.0

Установите background-color с контрастирующим цветом переднего плана с помощью наших помощников .text-bg-{color}. Ранее требовалось вручную сочетать ваш выбор .text-{color} и .bg-{color} утилит для стилизации, которые вы все еще можете использовать, если предпочитаете.

Заголовок

Primary заголовок карточки

Заголовок

Secondary заголовок карточки

Заголовок

Success заголовок карточки

Заголовок

Danger заголовок карточки

Заголовок

Warning заголовок карточки

Заголовок

Info заголовок карточки

Заголовок

Light заголовок карточки

Заголовок

Dark заголовок карточки

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Primary заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Secondary заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Success заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Danger заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Warning заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Info заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Light заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Dark заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>

Совет по доступности: Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что смысл очевиден из самого контента (например, видимый текст с достаточным контрастом цветов) или включен через альтернативные средства, такие как дополнительный текст, скрытый с помощью класса .visually-hidden.

Граница

Используйте утилиты границ для изменения только border-color карточки. Обратите внимание, что вы можете поместить классы .text-{color} на родительский .card или подмножество содержимого карточки, как показано ниже.

Заголовок

Primary заголовок карточки

Заголовок

Secondary заголовок карточки

Заголовок

Success заголовок карточки

Заголовок

Danger заголовок карточки

Заголовок

Warning заголовок карточки

Заголовок

Info заголовок карточки

Заголовок

Light заголовок карточки

Заголовок

Dark заголовок карточки

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Warning заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Info заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Light заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Заголовок</div>
  <div class="card-body">
    <h5 class="card-title">Dark заголовок карточки</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
</div>

Смешивание утилит

Вы также можете изменить границы на заголовке и подвале карточки по мере необходимости, и даже удалить их background-color с помощью .bg-transparent.

Заголовок

Заголовок карточки успеха

Подвал

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Заголовок</div>
  <div class="card-body text-success">
    <h5 class="card-title">Заголовок карточки успеха</h5>
    <p class="card-text">Немного быстрого примера текста для построения на заголовке карточки и составления основной части содержимого карточки.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Подвал</div>
</div>

Макет карточек

В дополнение к стилизации содержимого внутри карточек, Bootstrap включает несколько опций для размещения серий карточек. На данный момент эти опции макета еще не адаптивны.

Группы карточек

Используйте группы карточек для отображения карточек как единого, присоединенного элемента с равными по ширине и высоте столбцами. Группы карточек начинаются сложенными и используют display: flex; для становления присоединенными с равномерными размерами, начиная с контрольной точки sm.

Заголовок карточки

Последнее обновление 3 минуты назад

Заголовок карточки

Эта карточка имеет поддерживающий текст ниже как естественным введением к дополнительному содержимому.

Последнее обновление 3 минуты назад

Заголовок карточки

Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Эта карточка имеет даже более длинное содержимое, чем первая, чтобы показать равное действие высоты.

Последнее обновление 3 минуты назад

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Заголовок карточки</h5>
      <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      <p class="card-text"><small class="text-body-secondary">Последнее обновление 3 минуты назад</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Заголовок карточки</h5>
      <p class="card-text">Эта карточка имеет поддерживающий текст ниже как естественным введением к дополнительному содержимому.</p>
      <p class="card-text"><small class="text-body-secondary">Последнее обновление 3 минуты назад</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Заголовок карточки</h5>
      <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Эта карточка имеет даже более длинное содержимое, чем первая, чтобы показать равное действие высоты.</p>
      <p class="card-text"><small class="text-body-secondary">Последнее обновление 3 минуты назад</small></p>
    </div>
  </div>
</div>

При использовании групп карточек с подвалами их содержимое автоматически выровняется.

Заголовок карточки

Последнее обновление 3 минуты назад

Заголовок карточки

Эта карточка имеет поддерживающий текст ниже как естественным введением к дополнительному содержимому.

Последнее обновление 3 минуты назад

Заголовок карточки

Последнее обновление 3 минуты назад

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Заголовок карточки</h5>
      <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Последнее обновление 3 минуты назад</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Заголовок карточки</h5>
      <p class="card-text">Эта карточка имеет поддерживающий текст ниже как естественным введением к дополнительному содержимому.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Последнее обновление 3 минуты назад</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Заголовок карточки</h5>
      <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Эта карточка имеет даже более длинное содержимое, чем первая, чтобы показать равное действие высоты.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Последнее обновление 3 минуты назад</small>
    </div>
  </div>
</div>

Карточки сетки

Используйте систему сетки Bootstrap и её классы .row-cols для контроля того, сколько столбцов сетки (обернутых вокруг ваших карточек) вы показываете в строке. Например, здесь .row-cols-1 размещает карточки в одном столбце, а .row-cols-md-2 разделяет четыре карточки на равную ширину по нескольким строкам, начиная со средней контрольной точки.

Заголовок карточки

Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.

Заголовок карточки

Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому.

Заголовок карточки

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
</div>

Измените это на .row-cols-3, и вы увидите, как четвертая карточка обернется.

Заголовок карточки

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
</div>

Когда вам нужна равная высота, добавьте .h-100 к карточкам. Если вы хотите равные высоты по умолчанию, вы можете установить $card-height: 100% в Sass.

Заголовок карточки

Это короткая карточка.

Заголовок карточки

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это короткая карточка.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более длинная карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
    </div>
  </div>
</div>

Точно так же, как с группами карточек, подвалы карточек автоматически выровняются.

Заголовок карточки

Последнее обновление 3 минуты назад

Заголовок карточки

Эта карточка имеет поддерживающий текст ниже как естественным введением к дополнительному содержимому.

Последнее обновление 3 минуты назад

Заголовок карточки

Последнее обновление 3 минуты назад

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Это содержимое немного длиннее.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Последнее обновление 3 минуты назад</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Эта карточка имеет поддерживающий текст ниже как естественным введением к дополнительному содержимому.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Последнее обновление 3 минуты назад</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Заголовок карточки</h5>
        <p class="card-text">Это более широкая карточка с поддерживающим текстом ниже как естественным введением к дополнительному содержимому. Эта карточка имеет даже более длинное содержимое, чем первая, чтобы показать равное действие высоты.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Последнее обновление 3 минуты назад</small>
      </div>
    </div>
  </div>
</div>

Кирпичная кладка

В v4 мы использовали CSS-только технику для имитации поведения колонок, подобных Masonry, но эта техника пришла с множеством неприятных побочных эффектов. Если вы хотите иметь этот тип макета в v5, вы можете просто использовать плагин Masonry. Masonry не включен в Bootstrap, но мы сделали демо пример, чтобы помочь вам начать.

CSS

Переменные

Добавлено в v5.2.0

Как часть развивающегося подхода Bootstrap к CSS переменным, карточки теперь используют локальные CSS переменные на .card для улучшенной настройки в реальном времени. Значения для CSS переменных устанавливаются через Sass, поэтому настройка Sass также поддерживается.

scss/_card.scss

--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color};
--#{$prefix}card-height: #{$card-height};
--#{$prefix}card-color: #{$card-color};
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin};

Sass переменные

scss/_variables.scss

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-title-color:                  null;
$card-subtitle-color:               null;
$card-border-width:                 var(--#{$prefix}border-width);
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                var(--#{$prefix}border-radius);
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           var(--#{$prefix}body-bg);
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Карточки

О карточках

Пример

Заголовок карточки

Типы содержимого

Тело

Заголовки, текст и ссылки

Заголовок карточки

Подзаголовок карточки

Изображения

Группы списков

Кухонная мойка

Заголовок карточки

Заголовок и подвал

Особое обращение к заголовку

Рекомендуемое

Особое обращение к заголовку

Особое обращение к заголовку

Размеры

Используя разметку сетки

Особое обращение к заголовку

Особое обращение к заголовку

Используя утилиты

Заголовок карточки

Заголовок карточки

Используя пользовательский CSS

Особое обращение к заголовку

Выравнивание текста

Особое обращение к заголовку

Особое обращение к заголовку

Особое обращение к заголовку

Навигация

Особое обращение к заголовку

Особое обращение к заголовку

Изображения

Колпачки изображений

Заголовок карточки

Заголовок карточки

Наложения изображений

Заголовок карточки

Горизонтальные

Заголовок карточки

Стили карточек

Фон и цвет

Primary заголовок карточки

Secondary заголовок карточки

Success заголовок карточки

Danger заголовок карточки

Warning заголовок карточки

Info заголовок карточки

Light заголовок карточки

Dark заголовок карточки

Граница

Primary заголовок карточки

Secondary заголовок карточки

Success заголовок карточки

Danger заголовок карточки

Warning заголовок карточки

Info заголовок карточки

Light заголовок карточки

Dark заголовок карточки

Смешивание утилит

Заголовок карточки успеха

Макет карточек

Группы карточек

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Карточки сетки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки

Заголовок карточки