Перейти к основному содержанию Перейти к навигации по документации

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

Обзор

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

Пример

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

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

PlaceholderИзображение заглушка
Заголовок карточки

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

Перейти куда-нибудь
<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. Используйте его, когда Вам нужен раздел на карточке с мягкой подкладкой.

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

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

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

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

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

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

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

Изображения

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

PlaceholderИзображение заглушка

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

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

Список групп

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

  • Элемент
  • Второй элемент
  • Третий элемент
<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>
Рекомендуемые
  • Элемент
  • Второй элемент
  • Третий элемент
<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>
  • Элемент
  • Второй элемент
  • Третий элемент
<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>

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

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

PlaceholderИзображение заглушка
Заголовок карточки

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

  • Элемент
  • Второй элемент
  • Третий элемент
<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>

Верхний и нижний колонтитулы

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

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

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

Перейти куда-нибудь
<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*>.

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

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

Перейти куда-нибудь
<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>
Цитата

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

Кто-то известный в Заголовке источника
<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>
Рекомендуемые
Особое обращение с заголовком

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

Перейти куда-нибудь
<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-muted">
    2 дня спустя
  </div>
</div>

Размеры

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

Использование разметки сетки

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

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

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

Перейти куда-нибудь
Особое обращение с заголовком

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

Перейти куда-нибудь
<div class="row">
  <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 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>

Использование утилит

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

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

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

Кнопка
Заголовок карточки

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

Кнопка
<div class="card w-75">
  <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 в таблицах стилей или как встроенные стили, чтобы задать ширину.

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

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

Перейти куда-нибудь
<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>

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

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

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

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

Перейти куда-нибудь
Особое обращение с заголовком

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

Перейти куда-нибудь
Особое обращение с заголовком

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

Перейти куда-нибудь
<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>

<div class="card text-center" 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>

Навигация

Добавьте навигацию в заголовок (или блок) карточки с помощью компонентов навигации Bootstrap.

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

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

Перейти куда-нибудь
<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" href="#" tabindex="-1" 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>
Особое обращение с заголовком

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

Перейти куда-нибудь
<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" href="#" tabindex="-1" 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>

Изображения

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

Заглушки изображения

Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижни “заглушки изображения” — изображения вверху или внизу карточки.

PlaceholderЗаглушка изображения
Заголовок карточки

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

Последнее обновление 3 мин. назад

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

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

Последнее обновление 3 мин. назад

PlaceholderЗаглушка изображения
<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-muted">Последнее обновление 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-muted">Последнее обновление 3 мин. назад</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Накладываемые изображения

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

PlaceholderИзображение карточки
Заголовок карточки

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

Последнее обновление 3 мин. назад

<div class="card bg-dark text-white">
  <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">Последнее обновление 3 мин. назад</p>
  </div>
</div>
Обратите внимание, что содержимое не должно быть больше высоты изображения. Если содержимое больше изображения, оно будет отображаться вне изображения.

По горизонтали

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

PlaceholderИзображение
Заголовок карточки

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

Последнее обновление 3 мин. назад

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." 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-muted">Последнее обновление 3 мин. назад</small></p>
      </div>
    </div>
  </div>
</div>

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

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

Фон и цвет

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

Хедер
Primary Заголовок карточки

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

Хедер
Secondary Заголовок карточки

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

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

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

Хедер
Danger Заголовок карточки

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

Хедер
Warning Заголовок карточки

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

Хедер
Info Заголовок карточки

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

Хедер
Light Заголовок карточки

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

Хедер
Dark Заголовок карточки

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

<div class="card text-white 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-white 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-white 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-white 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-dark 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-dark 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-dark 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-white 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 Заголовок карточки

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

<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 text-dark">
    <h5 class="card-title">Dark Заголовок карточки</h5>
    <p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p>
  </div>
</div>

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

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

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

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

<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.

PlaceholderЗаглушка изображения
Заголовок карточки

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

Последнее обновление 3 мин. назад

PlaceholderЗаглушка изображения
Заголовок карточки

Эта подсказка имеет вспомогательный текст ниже, как естественный ввод к дополнительному контенту.

Последнее обновление 3 мин. назад

PlaceholderЗаглушка изображения
Заголовок карточки

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

Последнее обновление 3 мин. назад

<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-muted">Последнее обновление 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-muted">Последнее обновление 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-muted">Последнее обновление 3 мин. назад</small></p>
    </div>
  </div>
</div>

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

<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-muted">Последнее обновление 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-muted">Последнее обновление 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-muted">Последнее обновление 3 мин. назад</small>
    </div>
  </div>
</div>

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

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

<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, и Вы увидите обертку четвертой карты.

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

<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.

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

<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>

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

PlaceholderЗаглушка изображения
Заголовок карточки

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

<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-muted">Последнее обновление 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-muted">Последнее обновление 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-muted">Последнее обновление 3 мин. назад</small>
      </div>
    </div>
  </div>
</div>

Masonry

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

Sass

Переменные

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer / 2;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y / 2;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width / 2;