Карточки

Карточки 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>

Цитата

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

Кто-то известный в Заголовке источника

html

<div class="card">
  <div class="card-header">
    Цитата
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Известная цитата, содержащаяся в элементе цитаты..</p>
      <footer class="blockquote-footer">Кто-то известный в <cite title="Заголовок источника">Заголовке источника</cite></footer>
    </blockquote>
  </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>

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

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

Фон и цвет

Добавлено в версии 5.2.0

Установите background-color с контрастным 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.

Хедер

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

Подвал

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">Success Заголовок карточки</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>

Masonry

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

CSS

Переменные

Добавлено в версии 5.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 Заголовок карточки

Утилиты примесей

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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