Карты

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

О карточках

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

Пример

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

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

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

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

Переход куда-нибудь

<divclass="card"style="width: 18rem;"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>

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

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

Тело

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

This is some text within a card body.

<divclass="card"><divclass="card-body"> This is some text within a card body. </div></div>

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

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

«Подназвания» добавляются классом .card-subtitle в тэг <h*>. Если элементы с классами .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.

Ссылка карты Другая ссылка

<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Название карточки</h5><h6class="card-subtitle mb-2 text-muted">Подзаголовок карты</h6><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="card-link">Ссылка карты</a><ahref="#"class="card-link">Другая ссылка</a></div></div>

Изображения

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

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

<divclass="card"style="width: 18rem;"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><pclass="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>

Списки

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Vestibulum at eros</li></ul></div>

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<divclass="card"style="width: 18rem;"><divclass="card-header"> Featured </div><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Vestibulum at eros</li></ul></div>

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

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

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

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Ссылка карты Другая ссылка

<divclass="card"style="width: 18rem;"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Vestibulum at eros</li></ul><divclass="card-body"><ahref="#"class="card-link">Ссылка карты</a><ahref="#"class="card-link">Другая ссылка</a></div></div>

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

Добавьте заголовок и\или подвал к карточке.

Featured

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

<divclass="card"><divclass="card-header"> Featured </div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>

Заголовки карточек можно стилизовать добавлением стиля .card-header к <h*>.

Featured

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

<divclass="card"><h5class="card-header">Featured</h5><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<divclass="card"><divclass="card-header"> Quote </div><divclass="card-body"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer">Someone famous in <citetitle="Source Title">Source Title</cite></footer></blockquote></div></div>

Featured

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

2 days ago

<divclass="card text-center"><divclass="card-header"> Featured </div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div><divclass="card-footer text-muted"> 2 days ago </div></div>

Размеры

У карточек нет определенной ширины width, так что они всегда будут занимать 100% ширины, пока не объявлено иное. Вы можете изменить ширины в CSS, классами сетки, SASS или утилити-классами.

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

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

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

<divclass="row"><divclass="col-sm-6"><divclass="card"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div></div><divclass="col-sm-6"><divclass="card"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div></div></div>

Утилиты

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

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

With supporting text below as a natural lead-in to additional content.

Кнопка

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

With supporting text below as a natural lead-in to additional content.

Кнопка

<divclass="card w-75"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div><divclass="card w-50"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div>

Обычный CSS

Используйте обычный CSS для установки ширины.

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>

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

Вы можете быстро изменить выравнивание текста любой карточки – в ее частях или в целом – с помощью наших классов выравнивания.

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div><divclass="card text-center"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div><divclass="card text-right"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>

Добавляйте элементы навигации в заголовок карточки (или блок) с компонентами навигации Bootstrap.

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-tabs card-header-tabs"><liclass="nav-item"><aclass="nav-link active"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul></div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>

Специальный заголовок

With supporting text below as a natural lead-in to additional content.

Переход куда-нибудь

<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-pills card-header-pills"><liclass="nav-item"><aclass="nav-link active"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul></div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>

Изображения

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

Маленькие изображения

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

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

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

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

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

<divclass="card mb-3"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div><imgclass="card-img-bottom"src="..."alt="Card image cap"></div>

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

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

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

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

<divclass="card bg-dark text-white"><imgclass="card-img"src="..."alt="Card image"><divclass="card-img-overlay"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text">Last updated 3 mins ago</p></div></div>

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

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

Фон и цвет

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

Header

Primary card title

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

Header

Secondary card title

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

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Light card title

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

Header

Dark card title

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

<divclass="card text-white bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Primary card title</h5><pclass="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><divclass="card text-white bg-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Secondary card title</h5><pclass="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><divclass="card text-white bg-success mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Success card title</h5><pclass="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><divclass="card text-white bg-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Danger card title</h5><pclass="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><divclass="card text-white bg-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Warning card title</h5><pclass="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><divclass="card text-white bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Info card title</h5><pclass="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><divclass="card bg-light mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Light card title</h5><pclass="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><divclass="card text-white bg-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Dark card title</h5><pclass="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>

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

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

Границы

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

Header

Primary card title

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

Header

Secondary card title

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

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Light card title

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

Header

Dark card title

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

<divclass="card border-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-primary"><h5class="card-title">Primary card title</h5><pclass="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><divclass="card border-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-secondary"><h5class="card-title">Secondary card title</h5><pclass="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><divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-success"><h5class="card-title">Success card title</h5><pclass="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><divclass="card border-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-danger"><h5class="card-title">Danger card title</h5><pclass="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><divclass="card border-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-warning"><h5class="card-title">Warning card title</h5><pclass="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><divclass="card border-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-info"><h5class="card-title">Info card title</h5><pclass="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><divclass="card border-light mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Light card title</h5><pclass="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><divclass="card border-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-dark"><h5class="card-title">Dark card title</h5><pclass="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>

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

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

Header

Success card title

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

Footer

<divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header bg-transparent border-success">Header</div><divclass="card-body text-success"><h5class="card-title">Success card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><divclass="card-footer bg-transparent border-success">Footer</div></div>

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

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

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

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

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

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

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

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

Last updated 3 mins ago

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

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

<divclass="card-group"><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div>

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

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

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

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

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

Last updated 3 mins ago

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

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

<divclass="card-group"><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div></div>

«Карточный стол»

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

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

This is a longer 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

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

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

Last updated 3 mins ago

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

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

<divclass="card-deck"><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div>

Как и в группах карточек, подвалы карточек в «столах» автоматически расположатся в линию.

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

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

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

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

Last updated 3 mins ago

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

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

<divclass="card-deck"><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div></div>

Колонки карточек

Карточки можно выстроить в Masonry-подобные колонки с помощью CSS, обернув их в .card-columns. Для облегчения выравнивания карточки созданы на основе column, а не на flexbox.

Внимание! Размеры карточек могут быть разными, поэтому положение колонок тоже может разниться. Чтобы карточки не выходили из колонок, задайте display: inline-block, т.к. column-break-inside: avoid не совсем рабочее решение.

Название карточки, которое завершает новую строку

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

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

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Someone famous in Source Title

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

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

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

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

<divclass="card-columns"><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки, которое завершает новую строку</h5><pclass="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><divclass="card p-3"><blockquoteclass="blockquote mb-0 card-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer"><smallclass="text-muted"> Someone famous in <citetitle="Source Title">Source Title</cite></small></footer></blockquote></div><divclass="card"><imgclass="card-img-top"src="..."alt="Card image cap"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card bg-primary text-white text-center p-3"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p><footerclass="blockquote-footer"><small> Someone famous in <citetitle="Source Title">Source Title</cite></small></footer></blockquote></div><divclass="card text-center"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgclass="card-img"src="..."alt="Card image"></div><divclass="card p-3 text-right"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer"><smallclass="text-muted"> Someone famous in <citetitle="Source Title">Source Title</cite></small></footer></blockquote></div><divclass="card"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="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><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div>

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

.card-columns{@includemedia-breakpoint-only(lg){column-count:4;}@includemedia-breakpoint-only(xl){column-count:5;}}

Карты

О карточках

Пример

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

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

Тело

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

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

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

Изображения

Списки

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

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

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

Специальный заголовок

Featured

Специальный заголовок

Специальный заголовок

Размеры

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

Специальный заголовок

Специальный заголовок

Утилиты

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

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

Обычный CSS

Специальный заголовок

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

Специальный заголовок

Специальный заголовок

Специальный заголовок

Навигация

Специальный заголовок

Специальный заголовок

Изображения

Маленькие изображения

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

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

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

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

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

Фон и цвет

Primary card title

Secondary card title

Success card title

Danger card title

Warning card title

Info card title

Light card title

Dark card title

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

Границы

Primary card title

Secondary card title

Success card title

Danger card title

Warning card title

Info card title

Light card title

Dark card title

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

Success card title

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

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

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

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

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

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

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

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

«Карточный стол»

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

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

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

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

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

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

Колонки карточек

Название карточки, которое завершает новую строку

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