Карточка — это контейнер с облегчённым стилем, в который вы можете поместить практически любое содержимое. Для карточек доступно множество вариантов стилей, таких как выравнивание, отступы, цвета, заголовки и многое другое.
Базовая карточка
Чтобы создать базовую карточку, примените классы .card и .card-body к элементу, который определяет внешний контейнер карточки. Также добавьте .card-title к любым элементам заголовка и .card-text к текстовым элементам.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 к любому элементу заголовка HTML (т. е. к элементам <h1>-<h6>).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>
Навигация в заголовке
Вы также можете добавить в карточку навигационные вкладки или пилюли.
Вкладки
Добавьте класс .card-header-tabs к элементу <ul>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="max-width: 20rem;">
<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="#">Сандалии</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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="max-width: 20rem;">
<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="#">Сандалии</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 содержит padding, который обеспечивает хорошее эстетически приятное пространство между содержимым и границей карточки. В некоторых случаях вы можете удалить этот padding и выровнять содержимое заподлицо с краями карточки.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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="/example/image/12s.jpg" alt="Фото заката">
<div class="card-body">
<p class="card-text">Солнце скрылось за горизонтом. Эксперты утверждают,
что оно может исчезнуть навсегда!</p>
</div>
</div>
Чтобы создать содержимое заподлицо, не помещайте его в .card-body (потому что он содержит padding). Вместо этого уберите .card-body у внешнего <div> и вложите его внутрь (в свой собственный <div>). Теперь вы можете поместить содержимое за пределами .card-body (но все ещё внутри .card). Это эффективно удаляет padding, позволяя содержимому выстраиваться вплотную к краям карточки. При необходимости у вас может быть несколько элементов .card-body.
Обратите внимание, что при использовании содержимого с фиксированной шириной (например, изображений) может потребоваться указать ширину карточки, соответствующую ширине содержимого.
Верх и низ
Содержимое, такое как изображения, может располагаться заподлицо с верхней частью карточки (чтобы верхние углы изображения совпадали со скруглёнными углами карточки). Для этого примените к элементу <img> класс .card-img-top или .card-img-bottom.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="max-width: 202px;">
<!-- Изображение -->
<img class="card-img-top" src="/example/image/12s.jpg" alt="Фото заката">
<!-- Текст -->
<div class="card-body">
<p class="card-text">Пока это продолжалось — было хорошо.</p>
</div>
</div>
Группа списков
Вы можете добавить группы списков в карточки. Используйте класс .list-group-flush, чтобы поместить группы заподлицо с границей карточки.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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-left, .text-right, .text-center, .text-justify и .text-nowrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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="/example/image/12s.jpg" alt="Фото заката">
<!-- Текст -->
<div class="card-body">
<p class="card-text">Солнце скрылось за горизонтом. Эксперты утверждают,
что оно может исчезнуть навсегда!</p>
<a href="#" class="btn btn-primary">Весь доклад</a>
</div>
</div>
Контекстные цвета
Вы можете использовать текстовые и фоновые утилиты Bootstrap для изменения цвета карточки.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card card-inverse text-center" style="max-width: 202px;">
<!-- Изображение -->
<img class="card-img-top" src="/example/image/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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>
Карточный стол
Карточный стол похож на группу карточек, за исключением того, что карточки на столе не связаны друг с другом. Для этого вложите все карточки в элемент .card-deck, который в свою очередь вложен в .card-deck-wrapper.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card-deck-wrapper">
<div class="card-deck">
<!-- Карточка 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>
</div>
Колонки карточек
Bootstrap позволяет отобразить несколько карточек внутри каждой колонки, причём каждая карточка располагается ниже другой. Для этого вложите все карточки в элемент .card-columns.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card-columns">
<!-- Карточка 1 -->
<div class="card">
<div class="card-header">Карточка 1</div>
<div class="card-body">
<p class="card-text">Текст этой карточки.</p>
</div>
</div>
<!-- Карточка 2 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Карточка 2</h4>
<p class="card-text">Текст этой карточки.</p>
</div>
</div>
<!-- Карточка 3 -->
<div class="card">
<div class="card-header">Карточка 3</div>
<div class="card-body">
<p class="card-text">Текст этой карточки. Here's <a href="#" class="card-link">why</a>.</p>
</div>
<div class="card-footer">Подвал</div>
</div>
<!-- Карточка 4 -->
<div class="card">
<div class="card-header">Карточка 4</div>
<div class="card-body">
<p class="card-text">Текст этой карточки.</p>
</div>
<div class="card-footer">Подвал</div>
</div>
<!-- Карточка 5 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Карточка 5</h4>
<p class="card-text">Текст этой карточки.</p>
</div>
</div>
<!-- Карточка 6 -->
<div class="card">
<div class="card-header">Карточка 6</div>
<div class="card-body">
<p class="card-text">Текст этой карточки. Вот <a href="#" class="card-link">почему</a>.</p>
</div>
</div>
<!-- Карточка 7 -->
<div class="card">
<div class="card-header">Карточка 7</div>
<div class="card-body">
<p class="card-text">Текст этой карточки. Вот <a href="#" class="card-link">почему</a>.</p>
</div>
<div class="card-footer">Подвал</div>
</div>
<!-- Карточка 8 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Карточка 8</h4>
<p class="card-text">Текст этой карточки.</p>
</div>
</div>
</div>
Новое в Bootstrap 4
Карточки являются новыми в Bootstrap 4. Они заменяют функциональность, которая ранее предоставлялась панелями и миниатюрами.