Карточки

Карточка — это контейнер с облегчённым стилем, в который вы можете поместить практически любое содержимое. Для карточек доступно множество вариантов стилей, таких как выравнивание, отступы, цвета, заголовки и многое другое.

Базовая карточка

Чтобы создать базовую карточку, примените классы .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. Они заменяют функциональность, которая ранее предоставлялась панелями и миниатюрами.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты