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

Карточки

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

О карточках

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

Пример

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

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

PlaceholderИзображение
Название карточки

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

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

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

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

Тело

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

This is some text within a card body.
html
<div class="card">
  <div class="card-body">
    This is some text within a 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.

PlaceholderИзображение

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

html
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <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>
  </div>
</div>

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

Создавайте списки содержимого в карточке с помощью «расширенных» списков.

  • An item
  • A second item
  • A third item
html
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Featured
  • An item
  • A second item
  • A third item
html
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • An item
  • A second item
  • A third item
html
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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

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

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

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

  • An item
  • A second item
  • A third item
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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third 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>
Рекомендуемые
Особое обращение с заголовком

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

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

Изображения

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

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

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

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

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

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

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

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

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

PlaceholderЗаглушка изображения
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>

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

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

PlaceholderИзображение
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

html
<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">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
Обратите внимание, что содержание не должно быть больше, чем высота изображения. Если содержимое больше изображения, оно будет отображаться за пределами изображения.

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

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

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

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

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

PlaceholderИзображение
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

PlaceholderИзображение
Название карточки

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

PlaceholderИзображение
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

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">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</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">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</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">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

PlaceholderИзображение
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderИзображение
Название карточки

This card has supporting text below as a natural lead-in to additional content.

PlaceholderИзображение
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

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">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</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">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</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">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

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

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

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">This is a longer card with supporting text below as a natural lead-in to additional content.</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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Измените на .row-cols-3 и вы увидите четвертую карту.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">This is a longer card with supporting text below as a natural lead-in to additional content.</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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderИзображение
Название карточки

This is a short card.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content.

PlaceholderИзображение
Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">This is a short card.</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">This is a longer card with supporting text below as a natural lead-in to additional content.</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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

PlaceholderИзображение
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

PlaceholderИзображение
Название карточки

This card has supporting text below as a natural lead-in to additional content.

PlaceholderИзображение
Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

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">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</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">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</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">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</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;