Карточка — это контейнер с небольшой стилизацией, в который можно поместить практически любое содержимое. Доступно множество вариантов оформления, таких как выравнивание, поля, цвета, заголовки и многое другое.
Базовая карточка
Чтобы создать базовую карточку, примените классы .card и .card-body к элементу, для внешнего контейнера карточки.
Добавьте .card-title к любым элементам заголовка и .card-text к элементам текста.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card card-body">
<h4 class="card-title">Полироль для сапог</h4>
<p class="card-text">Полироль для сапог — это восковая паста,
крем или жидкость, используемая для полировки, придания блеска и водонепроницаемости
кожаным туфлям или сапогам для продления срока службы, а также восстановления,
поддержания и улучшения их внешнего вида.</p>
<a href="#" class="btn btn-primary">Подробнее</a>
</div>
Верхний и нижний колонтитулы
Вы можете установить верхний и/или нижний колонтитул, добавив элемент <div> с классом .card-header или .card-footer.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 20rem;">
<div class="card-header">
От спонсора
</div>
<div class="card-body">
<h4 class="card-title">Угги</h4>
<p class="card-text">Лучшие угги на свете. Бесплатная доставка, круглосуточная поддержка клиентов.</p>
</div>
<div class="card-footer">
от uuuuggghhh.com
</div>
</div>
Здесь я также переместил .card-body в новый <div> внутри карточки. Я сделал это, чтобы заголовок карточки располагался вровень с рамкой (у .card-body есть отступы, которые мне не нужны). Подробнее об этом ниже.
HTML-заголовки
Вы также можете применить класс .card-header к любому элементу заголовка (например, тегам <h1> — <h6>).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 20rem;">
<h3 class="card-header">Замёрзли ноги?</h3>
<div class="card-body">
<h4 class="card-title">Угги</h4>
<p class="card-text">Лучшие угги на свете. Бесплатная доставка, круглосуточная поддержка клиентов.</p>
</div>
<div class="card-footer">
от uuuuggghhh.com
</div>
</div>
Навигация в заголовке
Вы также можете добавить к карточке навигацию Bootstrap в виде вкладок или таблеток.
Вкладки
Добавьте класс .card-header-tabs к элементу <ul>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 20rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<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="#">Go Go</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Угги </h4>
<p class="card-text">Лучшие угги на свете. Бесплатная доставка, круглосуточная поддержка клиентов.</p>
</div>
<div class="card-footer">
от uuuuggghhh.com
</div>
</div>
Таблетки
Добавьте класс .card-header-pills к элементу <ul>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 20rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-tabs">
<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="#">Go Go</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Угги </h4>
<p class="card-text">Лучшие угги на свете. Бесплатная доставка, круглосуточная поддержка клиентов.</p>
</div>
<div class="card-footer">
от uuuuggghhh.com
</div>
</div>
Удаление padding
По умолчанию класс .card-body содержит отступы. Это обеспечивает красивое эстетически приятное пространство между содержимым и рамкой карточки.
Иногда может потребоваться удалить отступы и расположить содержимое вровень с краями карточки.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 202px;">
<!-- Заголовок -->
<div class="card-body">
<h4 class="card-title">Солнце ушло</h4>
<h6 class="card-subtitle text-muted">Солнце исчезает!</h6>
</div>
<!-- Изображение -->
<img src="/pix/samples/12s.jpg" alt="Фото заката">
<!-- Текст -->
<div class="card-body">
<p class="card-text">Солнце сегодня скрылось за горизонтом. Эксперты утверждают, что оно может исчезнуть навсегда!</p>
</div>
</div>
Чтобы удалить padding, не помещайте содержимое внутрь .card-body (поскольку у него есть отступы). Вместо этого удалите .card-body из внешнего <div> и вставьте его внутрь в отдельный <div>.
Теперь вы можете разместить содержимое за пределами .card-body (но все ещё внутри .card). Это эффективно удаляет отступы, позволяя содержимому выровняться вровень с краями карточки. При необходимости у вас может быть несколько элементов .card-body.
Обратите внимание, что при использовании содержимого фиксированной ширины (например, изображений) вам может потребоваться указать ширину карточки, соответствующую ширине содержимого.
Верх и низ
Вы можете расположить содержимое, такое как изображения, на одном уровне с верхней частью карточки (так, чтобы верхние углы изображения соответствовали закруглённым углам карточки).
Для этого примените класс .card-img-top или .card-img-bottom к тегу <img>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 202px;">
<!-- Изображение -->
<img class="card-img-top" src="/pix/samples/12s.jpg" alt="Фото заката">
<!-- Текст -->
<div class="card-body">
<p class="card-text">Было хорошо, пока это продолжалось…</p>
</div>
</div>
Группа списков
В карточки можно добавить группу списка. Используйте класс .list-group-flush, чтобы разместить его вровень с рамкой карточки.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 20rem;">
<!-- Заголовок -->
<div class="card-header">Солнце ушло</div>
<!-- Карточка -->
<div class="card-body">
<p class="card-text">Мнения экспертов разделились. Вот что, по их словам, будет дальше.</p>
</div>
<!-- Группа списка -->
<ul class="list-group list-group-flush">
<li class="list-group-item">Солнце вернётся</li>
<li class="list-group-item">Солнце не вернётся</li>
<li class="list-group-item">Оно породит ещё тысячи солнц</li>
<li class="list-group-item">Спокойной ночи!</li>
</ul>
</div>
Ссылки
Добавьте класс .card-link к элементу <a>, чтобы отображать ссылки внутри карточек.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card" style="max-width: 20rem;">
<div class="card-body">
<h4 class="card-title">Солнце ушло</h4>
<p class="card-text">Здесь собраны лучшие ресурсы по всем вопросам, связанным с Солнцем.</p>
<!-- Ссылки -->
<a href="#" class="card-link">Солнце ушло</a>
<a href="#" class="card-link">Ещё нет</a>
</div>
</div>
Выравнивание текста
Вы можете использовать любой из классов Bootstrap для выравнивания текста внутри карточки.
К ним относятся .text-start, .text-end, .text-center, .text-nowrap, а также различные классы .text-*-*, например, .text-sm-start, .text-md-start, .text-lg-start, .text-xl-start и др.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card text-center" style="max-width: 202px;">
<!-- Заголовок -->
<div class="card-body">
<h4 class="card-title">Солнце ушло</h4>
<h6 class="card-subtitle text-muted">Солнце исчезает!</h6>
</div>
<!-- Изображение -->
<img src="/pix/samples/12s.jpg" alt="Фото заката">
<!-- Текст -->
<div class="card-body">
<p class="card-text">Солнце сегодня скрылось за горизонтом. Эксперты утверждают, что оно может исчезнуть навсегда!</p>
<a href="#" class="btn btn-primary">Полный отчёт</a>
</div>
</div>
Контекстный цвет
Вы можете использовать текстовые и фоновые утилиты Bootstrap, чтобы изменить цвет карточки.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card text-white bg-primary" style="max-width: 20rem;">
<div class="card-body">
<h4 class="card-title">Солнце ушло</h4>
<p class="card-text">Здесь собраны лучшие ресурсы по всем вопросам, связанным с Солнцем.</p>
<!-- Ссылки -->
<a href="#" class="card-link">Солнце ушло</a>
<a href="#" class="card-link">Ещё нет</a>
</div>
</div>
Цвет рамки
Вы также можете использовать утилиты Bootstrap.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card text-primary border-primary" style="max-width: 20rem;">
<div class="card-body">
<h4 class="card-title">Солнце ушло</h4>
<p class="card-text">Здесь собраны лучшие ресурсы по всем вопросам, связанным с Солнцем.</p>
<!-- Ссылки -->
<a href="#" class="card-link">Солнце ушло</a>
<a href="#" class="card-link">Ещё нет</a>
</div>
</div>
Наложение текста на изображение
Вы можете применить к карточке фоновое изображение, после чего текст появится поверх неё.
Для этого примените к текстовому содержимому класс .card-img-overlay.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card card-inverse text-center" style="max-width: 202px;">
<!-- Изображение -->
<img class="card-img-top" src="/pix/samples/12s.jpg" alt="Фото заката">
<!-- Текст -->
<div class="card-img-overlay">
<h4 class="card-title">Что дальше?</h4>
<p class="card-text">Это конец?</p>
</div>
<div class="card-body">Смотрите на следующей неделе, чтобы узнать об этом!</div>
</div>
Ширина карточки
Карточки по умолчанию заполняют всё горизонтальное пространство. Вы можете изменить их ширину несколькими способами.
CSS
Можно явно указать ширину с помощью CSS. Например, использовать такие свойства, как width или max-width. В некоторых из приведённых выше примеров CSS применяется для ограничения ширины карточек.
Сетка
Как и в случае с любым другим содержимым, вы можете размещать свои карточки внутри сетки Bootstrap.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Солнце ушло</h4>
<p class="card-text">Здесь собраны лучшие ресурсы по всем вопросам, связанным с Солнцем.</p>
<a href="#" class="card-link">Солнце ушло</a>
<a href="#" class="card-link">Ещё нет</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Солнце взошло</h4>
<p class="card-text">Похоже, Солнце вернулось. Вот почему.</p>
<a href="#" class="btn btn-primary">Скачать отчёт</a>
</div>
</div>
</div>
</div>
</div>
Группа карточек
Группа карточек позволяет представить несколько карточек как один связанный элемент с одинаковой шириной и высотой.
Для этого поместите все карточки в элемент .card-group.
Если пример отображается неправильно, возможно, это связано с небольшим размером области просмотра.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="card-group">
<!-- Карточка 1 -->
<div class="card">
<div class="card-header">Солнце ушло</div>
<div class="card-body">
<p class="card-text">Здесь собраны лучшие ресурсы по всем вопросам, связанным с Солнцем.</p>
<a href="#" class="card-link">Солнце ушло</a>
<a href="#" class="card-link">Ещё нет</a>
</div>
</div>
<!-- Карточка 2 -->
<div class="card">
<div class="card-header">Солнце взошло</div>
<div class="card-body">
<p class="card-text">Похоже, Солнце вернулось. Вот <a href="#" class="card-link">почему</a>.</p>
</div>
</div>
</div>