Как сделать карточку в html

Скроенные джинсы

Denim Jeans

Некоторый текст о джинсах. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Создать карточку товара

Шаг 1) Добавить HTML:

Пример

Скроенные джинсы

Некоторый текст о джинсах..

Шаг 2) Добавить CSS:

Пример

.card <
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
>

.price color: grey;
font-size: 22px;
>

.card button border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
>

.card button:hover opacity: 0.7;
>

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

colorpicker

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Как сделать — Карточки

Совет: Зайдите на наш учебник CSS Тени, чтобы узнать больше о тенях.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

colorpicker

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

Карточки

Карточки Bootstrap предоставляют собой гибкий и расширяемый контейнер контента с множеством вариантов и опций.

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

О карточках

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

Пример

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

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

Placeholder

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

Some quick example text to build on the card title and make up the bulk of the card’s content.

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">Some quick example text to build on the card title and make up the bulk of the card's content.p> a href="#" class="btn btn-primary">Go somewherea> div> div>

Типы содержимого

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

Тело

«Фундамент» карточки – класс .card-body . Используйте его всегда, когда вам нужна выделенная секция внутри карточки.

This is some text within a card body.

div class="card"> div class="card-body"> This is some text within a card body. div> div>

Названия, текст и ссылки

Названия карточек создаются добавлением класса .card-title к тэгу . Аналогично, ссылки добавляются и размещаются рядом друг с другом добавлением класса .card-link в тэг .

«Подназвания» добавляются классом .card-subtitle в тэг . Если элементы с классами .card-title и .card-subtitle размещены в элементе с классом .card-body , название и «подназвание» карточки выровняются прекрасно.

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

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

Some quick example text to build on the card title and make up the bulk of the card’s content.

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">Some quick example text to build on the card title and make up the bulk of the card's content.p> a href="#" class="card-link">Card linka> a href="#" class="card-link">Another linka> div> div>

Изображения

Класс .card-img-top размещает изображение наверху карточки. Текст может быть добавлен к карточке классом .card-text . Текст внутри этого класса может быть оформлен стандартными тегами HTML.

Placeholder

Some quick example text to build on the card title and make up the bulk of the card’s content.

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p> div> div>

Группы списков

Создавайте списки содержимого в карточке с помощью «расширенных» списков.

An item
A second item
A third item

div class="card" style="width: 18rem;"> ul class="list-group list-group-flush"> li class="list-group-item">An itemli> li class="list-group-item">A second itemli> li class="list-group-item">A third itemli> ul> div>

An item
A second item
A third item

div class="card" style="width: 18rem;"> div class="card-header"> Featured div> ul class="list-group list-group-flush"> li class="list-group-item">An itemli> li class="list-group-item">A second itemli> li class="list-group-item">A third itemli> ul> div>

An item
A second item
A third item

Card footer

div class="card" style="width: 18rem;"> ul class="list-group list-group-flush"> li class="list-group-item">An itemli> li class="list-group-item">A second itemli> li class="list-group-item">A third itemli> ul> div class="card-footer"> Card footer div> div>

«Плавильный котел» (В смысле: бросайте все что есть)

Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.

Placeholder

Заголовок карточки

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

An item
A second item
A third item

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">An itemli> li class="list-group-item">A second itemli> li class="list-group-item">A third itemli> ul> div class="card-body"> a href="#" class="card-link">Ссылка карточкиa> a href="#" class="card-link">Другая ссылкаa> div> div>

Заголовок и «подвал»

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

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

Особое обращение с заголовком

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

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 к элементам .

Особое обращение с заголовком

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

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"> Цитата div> div class="card-body"> blockquote class="blockquote mb-0"> p>Известная цитата, содержащаяся в элементе цитаты..p> footer class="blockquote-footer">Кто-то известный в cite title="Заголовок источника">Заголовке источникаcite>footer> blockquote> div> div>

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

Особое обращение с заголовком

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

2 дня спустя

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>

Размеры

У карточек нет определенной ширины 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: 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" 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" href="#" tabindex="-1" 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" href="#" tabindex="-1" 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>

Изображения

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

Заглушки изображения

Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижни “заглушки изображения” — изображения вверху или внизу карточки.

Placeholder

Заголовок карточки

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

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

Заголовок карточки

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

Placeholder

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-muted">Последнее обновление 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-muted">Последнее обновление 3 мин. назадsmall>p> div> img src=". " class="card-img-bottom" alt=". "> div>

«Наложение» изображений

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

Placeholder

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

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

div class="card bg-dark text-white"> img src=". " class="card-img" alt=". "> div class="card-img-overlay"> h5 class="card-title">Название карточкиh5> p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.p> p class="card-text">Last updated 3 mins agop> div> div>

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

По горизонтали

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

Placeholder

Заголовок карточки

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

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

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

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

У карточек есть множество опций для настройки их фона, границ и цвета.

Фон и цвет

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

Primary Заголовок карточки

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

Secondary Заголовок карточки

Success Заголовок карточки

Danger Заголовок карточки

Warning Заголовок карточки

Info Заголовок карточки

Light Заголовок карточки

Dark Заголовок карточки

div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Primary Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-secondary mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Secondary Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-success mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Success Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-danger mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Danger Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-dark bg-warning mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Warning Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-dark bg-info mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Info Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-dark bg-light mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Light Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-dark mb-3" style="max-width: 18rem;"> div class="card-header">Шапкаdiv> div class="card-body"> h5 class="card-title">Dark Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div>

Использование вспомогательных технологий

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

Границы

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

Primary Заголовок карточки

Secondary Заголовок карточки

Success Заголовок карточки

Danger Заголовок карточки

Warning Заголовок карточки

Info Заголовок карточки

Light Заголовок карточки

Dark Заголовок карточки

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">Primary Заголовок карточки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">Secondary Заголовок карточки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">Success Заголовок карточки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">Danger Заголовок карточки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">Warning Заголовок карточки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">Info Заголовок карточки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">Light Заголовок карточки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">Dark Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div>

Утилиты миксинов

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

Success Заголовок карточки

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">Success Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div class="card-footer bg-transparent border-success">Подвалdiv> div>

Расположение карточек

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

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

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

Placeholder

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

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Placeholder

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

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Placeholder

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

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

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">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.p> p class="card-text">small class="text-muted">Last updated 3 mins agosmall>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">This card has supporting text below as a natural lead-in to additional content.p> p class="card-text">small class="text-muted">Last updated 3 mins agosmall>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">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.p> p class="card-text">small class="text-muted">Last updated 3 mins agosmall>p> div> div> div>

При использовании групп карточек с «подвалами» содержимое карточек расположится автоматически.

Placeholder

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

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
Placeholder

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

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Placeholder

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

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

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">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.p> div> div class="card-footer"> small class="text-muted">Last updated 3 mins agosmall> 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">This card has supporting text below as a natural lead-in to additional content.p> div> div class="card-footer"> small class="text-muted">Last updated 3 mins agosmall> 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">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.p> div> div class="card-footer"> small class="text-muted">Last updated 3 mins agosmall> div> div> div>

Сеточные карты

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

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.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">This is a longer card with supporting text below as a natural lead-in to additional content.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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.p> div> div> div> div>

Измените на .row-cols-3 и вы увидите четвертую карту.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.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">This is a longer card with supporting text below as a natural lead-in to additional content.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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.p> div> div> div> div>

Когда вам понадобится одинаковая высота, добавьте .h-100 к карточкам. Если вы хотите иметь одинаковую высоту по умолчанию, вы можете установить $card-height: 100% в Sass.

Placeholder

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

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Простая семантичная карточка-ссылка

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

Первая реализация

Логично предположить, что этот элемент должен быть сделан тегом a . Как-то так:

 Item header
 Item looong description

Проблема

Во-первых это не семантично. Ссылка предполагает наличие внутри себя текста, который описывает, куда она ведет. Помещать туда что-то кроме него — значит путать пользователей со скринридерами и поисковых роботов.

Во-вторых внутри карточки могут предполагаться другие ссылки. Например, на автора статьи или категорию товара:

 Item header
 Item looong description
 Ivan Ivanovich

Такая верстка не будет работать. Ссылки нельзя вкладывать внутрь других ссылок. Поведение в таком случае не определено, поэтому браузеры избегают такой верстки и превращают ее в такую:

 Item header
 Item looong description
 Ivan Ivanovich

Реализация получше

Все же стоит сделать карточку подходящим для нее тегом, в данном случае article , а главную ссылку положить в заголовок:

 Item header
 Item looong description

Теперь верстка семантична и будет нормально прочитана скринридерами, роботами и другими разработчиками.

Как же сделать переход по ссылке по клику в любое место (кроме ссылки на автора), а не только в заголовок? Существует неочевидное решение на CSS для таких случаев.

 Item header
 Item looong description
 
 article < position: relative; >h3 > a::before

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

«Вложенные» ссылки

Чтобы сделать внутри этой карточки ссылку на автора или категорию товара, положим нужные элементы поверх псевдо-элемента ссылки. Или же опустим псевдо под другие элементы. Значит нужно свойство z-index для управления контекстом наложения и pointer-events для управления событием клика.

 Item header
 Item looong description
 Ivan Ivanovich 
 article < position: relative; z-index: 0; >h3 > a::before < position: absolute; content: ''; inset: 0; z-index: -1; >p, img

добавили z-index: -1 для псевдо-элемента, чтобы убрать его под все остальные элементы в карточке
добавили z-index: 0 для всей карточки, чтобы создать новый локальный контекст наложения, иначе бы псевдо был в глобальном контексте наложения и убрался под элемент body
добавили pointer-events: none; для описания и картинки, чтобы сделать их прозрачными для событий мыши, теперь клики в них считаются кликами в элемент ровно под ними, то есть в псевдо
элементы внутри карточки, которым мы не указали pointer-events (ссылка на автора в данном случае) будут лежать поверх псевдо и не пропускать через себя события мыши, это можно использовать для красивых ховер-эффектов

Более сложные ховер-эффекты

В примере выше по наведению мыши мы только меняем цвет текста для заголовка-ссылки. Это сделано с помощью псевдокласса :hover на теге a . Что делать, если по ховеру нам нужно менять цвет фона карточки?

Первая мысль: сделать селектор article:hover и в нем прописать новый цвет фона.

Почему это плохо? Bo-первых, потому что этот псевдокласс предназначен для интерактивных элементов. article не интерактивный. Во-вторых, этот эффект будет срабатывать, когда пользователь наводит мышку на «вложенные» ссылки. А должен только при наведении на «главную» ссылку.

Правильнее будет использовать функциональный псевдокласс :has() и написать так:

article:has(h3 > a:hover)

От такого решение нас пока останавливает только поддержка :has() в браузерах ��

Поэтому используем article:hover , но помним, что это не очень правильное решение.

Нерешенные проблемы

Это решение не идеальное с точки зрения UX. Например, нельзя выделить текст в карточке, не зажав кнопку Alt (option на MacOS). Эта проблема осталась нерешенной.

Цитирования

324-ый выпуск подкаста Веб-стандарты
Фронтенд-новости №12 от Николая Шабалина

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

Мотивировать меня чаще писать о CSS можно на patreon.

Мои каналы о CSS css_mind и csswg_weekly в телеграм.

Нашли опечатку? Сообщите мне о ней.

Как сделать карточку в html

Скроенные джинсы

Создать карточку товара

Шаг 1) Добавить HTML:

Пример

Скроенные джинсы

Шаг 2) Добавить CSS:

Пример

ВЫБОР ЦВЕТА

Сообщить об ошибке

Ваше предложение:

Спасибо Вам за то, что помогаете!

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

Как сделать — Карточки

ВЫБОР ЦВЕТА

Сообщить об ошибке

Ваше предложение:

Спасибо Вам за то, что помогаете!

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

Карточки

О карточках

Пример

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

Типы содержимого

Тело

Названия, текст и ссылки

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

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

Изображения

Группы списков

«Плавильный котел» (В смысле: бросайте все что есть)

Заголовок карточки

Заголовок и «подвал»

Особое обращение с заголовком

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

Особое обращение с заголовком

Особое обращение с заголовком

Размеры

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

Особое обращение с заголовком

Особое обращение с заголовком

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

Заголовок карточки

Заголовок карточки

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

Особое обращение с заголовком

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

Особое обращение с заголовком

Особое обращение с заголовком

Особое обращение с заголовком

Навигация

Особое обращение с заголовком

Особое обращение с заголовком

Изображения

Заглушки изображения

Заголовок карточки

Заголовок карточки

«Наложение» изображений

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

По горизонтали

Заголовок карточки

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

Фон и цвет

Primary Заголовок карточки

Secondary Заголовок карточки

Success Заголовок карточки

Danger Заголовок карточки

Warning Заголовок карточки

Info Заголовок карточки

Light Заголовок карточки

Dark Заголовок карточки

Использование вспомогательных технологий

Границы

Primary Заголовок карточки