Bootstrap Cards (карточки)

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

О карточках

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

Создание простой карточки

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

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

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

<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Результат:

Cras Justo Odio
Dapibus ac facilisis в
Вестибулум на эросе

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Рекомендуемые
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Результат:

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

Cras Justo Odio
Dapibus ac facilisis в
Вестибулум на эросе

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-footer">
    Нижний колонтитул карточки
  </div>
</div>

Результат:

Cras Justo Odio
Dapibus ac facilisis в
Вестибулум на эросе

Нижний колонтитул карточки

Несколько типов контента

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

<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Ссылка 1</a>
    <a href="#" class="card-link">Ссылка 2</a>
  </div>
</div>

Результат:

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

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

Cras Justo Odio
Dapibus ac facilisis в
Вестибулум на эросе

Ссылка 1 Ссылка 2

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

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

<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">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число посуере эрат анте.</p>
      <footer class="blockquote-footer">Кто-то известный в  <cite title="Название источника">названии источника</cite></footer>
    </blockquote>
  </div>
</div>

Результат:

Цитата

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат анте.

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

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

Результат:

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

Особое обращение с титулом

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

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

2 дня спустя

Размеры

Карточки не предполагают никакого специфического 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: 17rem;">
  <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>

Результат:

Особое обращение с титулом

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

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

Особое обращение с титулом

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

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

Особое обращение с титулом

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

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

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

Результат:

Особый режим заголовка

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

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

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

Результат:

Особый режим заголовка

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

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

Изображения

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

Изображения шапки

Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижние «колонтитулы» - изображения вверху или внизу карточки.

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

Результат:

Название карты

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

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

Название карты

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

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

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

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

Результат:

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

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

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

Horizontal card (горизонтальная карта)

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

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

Результат:

Название карты

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

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

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

Фон и цвет

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

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

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

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

Результат:

Заголовок

Название основной карты

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

Заголовок

Название дополнительной карты

Заголовок

Название карты успеха

Заголовок

Название карты опасности

Заголовок

Название карточки с предупреждением

Заголовок

Название информационной карты

Заголовок

Название облегченной карты

Заголовок

Название темной карты

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

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с классом .sr-only.

Границы

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

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

Результат:

Заголовок

Название основной карты

Заголовок

Название дополнительной карты

Заголовок

Название карточки успеха

Заголовок

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

Заголовок

Заголовок карточки предупреждения

Заголовок

Заголовок информационной карточки

Заголовок

Название световой карты

Заголовок

Название темной карты

Утилиты mixins

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

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

Результат:

Заголовок

Название карточки успеха

Нижний колонтитул

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

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

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

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

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

Результат:

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

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

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

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

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

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

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

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

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

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

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

Результат:

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

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

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

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

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

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

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

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

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

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

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

Результат:

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

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

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

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

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

Результат:

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

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

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

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

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

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

Masonry

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

CSS

Переменные

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

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

scss/_card.scss

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

Переменные Sass

scss/_variables.scss

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

FAQ (ответы на часто задаваемые вопросы)

Что такое карточки в Bootstrap 5?

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

Как стилизовать карточки?

Используйте классы Bootstrap для настройки фона, границы, шрифта и других стилей.

Можно ли вложить карточки друг в друга?

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

Заключение

Карточки - это неотъемлемая часть современного веб-дизайна. Они помогают организовать информацию, делают контент более читаемым и привлекательным. Независимо от того, создаете ли вы блог, интернет-магазин или корпоративный сайт, карточки в Bootstrap 5 помогут вам достичь желаемого результата. Используйте их с умом и экспериментируйте с разными вариантами, чтобы создать уникальные и современные веб-страницы!

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

Bootstrap Cards (карточки)

О карточках

Создание простой карточки

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

Типы контента

Тело

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

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

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

Изображения

Список групп

Несколько типов контента

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

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

Особое обращение с титулом

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

Особое обращение с титулом

Особое обращение с титулом

Размеры

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

Особое обращение с титулом

Особое обращение с титулом

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

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

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

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

Особое обращение с титулом

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

Особое обращение с титулом

Особое обращение с титулом

Особое обращение с титулом

Навигация

Особый режим заголовка

Особый режим заголовка

Изображения

Изображения шапки

Название карты

Название карты

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

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

Horizontal card (горизонтальная карта)

Название карты

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

Фон и цвет

Название основной карты

Название дополнительной карты

Название карты успеха

Название карты опасности

Название карточки с предупреждением

Название информационной карты

Название облегченной карты

Название темной карты

Границы

Название основной карты

Название дополнительной карты

Название карточки успеха

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

Заголовок карточки предупреждения

Заголовок информационной карточки

Название световой карты

Название темной карты

Утилиты mixins

Название карточки успеха

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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