Карточки

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

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

О карточках

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

Пример

Карточки созданы с применением как можно более меньшего количества кода и стилей, но они все же имеют множество инструментов для настройки и контроля. Их легко выравнивать и сочетать с другими компонентами 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, название и «подназвание» карточки выровняются прекрасно.

Название карточки

Подзаголовок карты

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

html

<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">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Изображения

Класс .card-img-top размещает изображение наверху карточки. Текст может быть добавлен к карточке классом .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-muted">
    2 дня спустя
  </div>
</div>

Размеры

У карточек нет определенной ширины width, так что они всегда будут занимать 100% ширины, пока не объявлено иное. Вы можете изменить ширины в CSS, классами сетки, SASS или утилити-классами.

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

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

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

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

Перейти куда-нибудь

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

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

Перейти куда-нибудь

html

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

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

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

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

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

Кнопка

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

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

Кнопка

html

<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 в таблицах стилей или как встроенные стили.

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

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

Перейти куда-нибудь

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

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

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

Перейти куда-нибудь

html

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

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

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

Перейти куда-нибудь

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

Изображения

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

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

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

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

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

Последнее обновление 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-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>

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

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

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

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

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

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

Последнее обновление 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-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 разбивает четыре карты на равную ширину по нескольким рядам от средней до точки останова.

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

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

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

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

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

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-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, но мы сделали демонстрационный пример, который поможет вам начать работу.

CSS

Переменные

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

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

  --#{$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-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

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $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($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 * .5;

Карточки

О карточках

Пример

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

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

Тело

Названия, текст и ссылки

Название карточки

Подзаголовок карты

Изображения

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

«Плавильный котел» (В смысле: бросайте все что есть)

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

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

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

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

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

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

Размеры

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

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

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

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

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

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

Использование собственного CSS

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

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

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

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

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

Навигация

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

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

Изображения

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

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

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

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

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

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

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

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

Фон и цвет

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

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

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

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

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

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

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

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

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

Границы

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

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

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

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

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

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

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

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

Утилиты миксинов

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

Расположение карточек

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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