Карточки

Карточка (card) — блок с рамкой, скруглёнными углами и внутренними отступами, в который кладут связанное содержимое: тариф, товар, статью, показатель статистики. Это, пожалуй, самый используемый компонент Bootstrap: на лендинге из карточек собирают тарифы, в админ-панели — блоки с цифрами.

Простая карточка

Карточка — это card, внутри неё card-body, а в нём заголовок card-title и текст card-text:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="card" style="max-width: 18rem">
  <div class="card-body">
    <h5 class="card-title">Дедлайны</h5>
    <p class="card-text">Tasko напомнит о сроке за день, чтобы ничего не потерялось.</p>
    <a href="#" class="btn btn-primary">Подробнее</a>
  </div>
</div>

Белый блок в рамке с заголовком, текстом и кнопкой. Ширину ограничивает стиль max-width, а в реальной вёрстке — колонка сетки.

Картинка, шапка и подвал

Класс	Часть карточки
`card-img-top`	Картинка сверху, со скруглёнными верхними углами
`card-header`	Серая полоса-шапка
`card-footer`	Серая полоса-подвал
`card-subtitle`	Подзаголовок
`list-group list-group-flush`	Список пунктов внутри карточки

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="card text-center" style="max-width: 18rem">
  <div class="card-header">Командный</div>
  <div class="card-body">
    <h5 class="card-title display-6">$9</h5>
    <p class="card-text text-body-secondary">за пользователя в месяц</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">До 50 участников</li>
    <li class="list-group-item">Отчёты по проектам</li>
  </ul>
  <div class="card-footer">
    <button type="button" class="btn btn-primary w-100">Выбрать</button>
  </div>
</div>

Готовая карточка тарифа: шапка с названием, крупная цена, список возможностей и кнопка в подвале.

Ряд карточек

Карточки раскладывают сеткой: каждая — в своей колонке. Класс h-100 растягивает карточку на всю высоту колонки, и ряд выглядит ровным, даже если текст разной длины:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="row row-cols-1 row-cols-sm-2 g-3">
  <div class="col">
    <div class="card h-100">
      <img src="/media/photo-400x250.jpg" 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="/media/photo-400x250.jpg" class="card-img-top" alt="Отчёт на экране">
      <div class="card-body">
        <h5 class="card-title">Отчёты</h5>
        <p class="card-text">Сколько задач закрыто за неделю и кем — в одном окне, без таблиц и ручного подсчёта.</p>
      </div>
    </div>
  </div>
</div>

Две карточки с картинками одной высоты, хотя у второй текст длиннее.

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

В админ-панели карточка часто держит одно число: card-body с подписью text-body-secondary small и числом fs-3 fw-bold. Четыре такие карточки в ряд row-cols-lg-4 — верхняя полоса дашборда.

Частая ошибка

Класть текст прямо в card, без card-body. У самой карточки нет внутренних отступов — они у card-body, — поэтому текст прилипнет к рамке. Картинки card-img-top и списки list-group-flush ставятся прямо в карточку, а текст и кнопки — в card-body.

Спасибо, что читаете!