Карточки
Карточки Bootstrap предоставляют собой гибкий и расширяемый контейнер содержимого с множеством вариантов и опций.
О карточках
Карточка – это гибкий и расширяемый контейнер содержимого. Она включает опции заголовков и футеров, широкий спектр контента, контекстуальные цвета бэкграунда и мощные опции отображения. Если вы знакомы с Bootstrap 3, - карты заменили наши старые панели, «колодцы» (закругленная граница вокруг элемента с серой заливкой и паддингом) и маленькие версии изображений - «тамбнейлы». Схожая с этими элементами функциональность доступна для карточек в виде классов-модификаторов.
Пример
Карточки созданы с применением как можно более меньшего количества кода и стилей, но они все же имеют множество инструментов для настройки и контроля. Их легко выравнивать и сочетать с другими компонентами Bootstrap, т.к. они созданы с помощью «флексбокса». По умолчанию они не имеют margin, поэтому при необходимости используйте утилиты расстояния.
Внизу – пример базовой карточки фиксированной ширины со смешанным содержимым. Карточки не имеют фиксированной ширины по умолчанию, так что они будут автоматически заполнять полную ширину родительского элемента. Этот параметр можно настроить с помощью различных опций размеров.
Заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Идти куда-нибудь<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div>Типы содержимого
Карточки поддерживают широкий спектр содержимого, включая изображения, текст, списки, и т.д. Внизу – примеры.
Тело
«Фундамент» карточки – класс .card-body. Используйте его всегда, когда вам нужна выделенная секция внутри карточки.
<divclass="card"><divclass="card-body"> Это текст в теле карточки. </div></div>Названия, текст и ссылки
Названия карточек создаются добавлением класса .card-title к тэгу <h*>. Аналогично, ссылки добавляются и размещаются рядом друг с другом добавлением класса .card-link в тэг <a>.
«Подназвания» добавляются классом .card-subtitle в тэг <h*>. Если элементы с классами .card-title и .card-subtitle размещены в элементе с классом .card-body, название и «подназвание» карточки выровняются прекрасно.
Заголовок карточки
Подзаголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Ссылка карточкиДругая ссылка<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><h6class="card-subtitle mb-2 text-muted">Подзаголовок карточки</h6><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p><ahref="#"class="card-link">Ссылка карточки</a><ahref="#"class="card-link">Другая ссылка</a></div></div>Изображения
Класс .card-img-top размещает изображение наверху карточки. Текст может быть добавлен к карточке классом .card-text. Текст внутри этого класса может быть оформлен стандартными тегами HTML.
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div>Списки
Создавайте списки содержимого в карточке с помощью «расширенных» списков.
- An item
- A second item
- A third item
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul></div>- An item
- A second item
- A third item
<divclass="card"style="width: 18rem;"><divclass="card-header"> Рекомендуемые </div><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul></div>- An item
- A second item
- A third item
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><divclass="card-footer"> Подвал карточки </div></div>«Плавильный котел» (в смысле – бросайте все что есть)
Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.
Заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
- An item
- A second item
- A third item
<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><divclass="card-body"><ahref="#"class="card-link">Ссылка карточки</a><ahref="#"class="card-link">Другая ссылка</a></div></div>Заголовок и «подвал»
Добавьте заголовок и\или подвал к карточке.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="card"><divclass="card-header"> Рекомендуемые </div><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div>Заголовки карточек можно стилизовать, добавив .card-header к элементам <h*>.
Рекомендуемые
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="card"><h5class="card-header">Рекомендуемые</h5><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div>Известная цитата, содержащаяся в элементе цитаты.
<divclass="card"><divclass="card-header"> Цитата </div><divclass="card-body"><blockquoteclass="blockquote mb-0"><p>Известная цитата, содержащаяся в элементе цитаты.</p><footerclass="blockquote-footer">Кто-то известный в <citetitle="Название источника">названии источника</cite></footer></blockquote></div></div>Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="card text-center"><divclass="card-header"> Рекомендуемые </div><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div><divclass="card-footer text-muted"> 2 days ago </div></div>Размеры
У карточек нет определенной ширины width, так что они всегда будут занимать 100% ширины, пока не объявлено иное. Вы можете изменить ширины в CSS, классами сетки, SASS или утилити-классами.
Использование разметки сеток
Используя сетку, оборачивайте карточки в колонки и ряды, если необходимо.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудьОсобое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="row"><divclass="col-sm-6"><divclass="card"><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</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">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div></div></div>Утилиты
Используйте наши утилиты размеров для быстрой настройки ширины карточки.
Заголовок карточки
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
КнопкаЗаголовок карточки
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Кнопка<divclass="card w-75"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div><divclass="card w-50"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div>Использование собственного CSS
Используйте собственный CSS в таблицах стилей или как встроенные стили, чтобы задать ширину.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div>Выравнивание текста
Вы можете быстро изменить выравнивание текста любой карточки – в ее частях или в целом – с помощью наших классов выравнивания.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудьОсобое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудьОсобое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</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">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</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">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div>Навигация
Добавляйте элементы навигации в заголовок карточки (или блок) с компонентами навигации Bootstrap.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-tabs card-header-tabs"><liclass="nav-item"><aclass="nav-link active"href="#">Активная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенная</a></li></ul></div><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div>Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Идти куда-нибудь<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-pills card-header-pills"><liclass="nav-item"><aclass="nav-link active"href="#">Активная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенная</a></li></ul></div><divclass="card-body"><h5class="card-title">Особое обращение с титулом</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Идти куда-нибудь</a></div></div>Изображения
В карточках есть настройки для работы с изображениями. Вы можете добавить «уменьшенное изображение» к низу карточки, наложить содержимое карточки на изображение либо просто вставить его в карточку.
Маленькие изображения
По аналогии с заголовками и «подвалами», карточки могут иметь image cap вверху и внизу – маленькие изображения.
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление: 3 мин. назад
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление: 3 мин. назад
<divclass="card mb-3"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div><divclass="card"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div><imgsrc="..."class="card-img-bottom"alt="..."></div>«Наложение» изображений
Превратите изображение в фон карточки и наложите на него текст карточки. В зависимости от изображения тут могут потребоваться дополнительные стили или утилиты.
<divclass="card bg-dark text-white"><imgsrc="..."class="card-img"alt="..."><divclass="card-img-overlay"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text">Последнее обновление: 3 мин. назад</p></div></div>Обратите внимание, что содержание не должно быть больше, чем высота изображения. Если содержимое больше изображения, оно будет отображаться за пределами изображения.
Горизонтальный
Используя комбинацию классов сетки и утилит, карты можно сделать горизонтальными для мобильных устройств и быстро реагировать. В приведенном ниже примере мы удаляем разводы сетки с помощью .no-gutters и используем классы .col-md-*, чтобы сделать карту горизонтальной в точке останова md. В зависимости от содержимого вашей карты могут потребоваться дополнительные настройки.
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление: 3 мин. назад
<divclass="card mb-3"style="max-width: 540px;"><divclass="row no-gutters"><divclass="col-md-4"><imgsrc="..."alt="..."></div><divclass="col-md-8"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div></div></div>Стили карточек
У карточек есть множество опций для настройки их фона, границ и цвета.
Фон и цвет
Используйте утилиты фона и текста для изменения внешнего вида карточки.
Primary заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Secondary заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Success заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Danger заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Warning заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Info заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Light заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Dark заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
<divclass="card text-white bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Primary заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card text-white bg-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Secondary заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card text-white bg-success mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Success заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card text-white bg-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Danger заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card text-white bg-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Warning заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card text-white bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Info заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card bg-light mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Light заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card text-white bg-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Dark заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Границы
Используйте утилиты границ для изменения атрибута border-color карточки. Заметьте, что вы можете вставить классы .text-{color} в родительский элемент класса .card или в поднабор содержимого карточки – как показано ниже.
Primary заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Secondary заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Success заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Danger заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Warning заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Info заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Light заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
Dark заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
<divclass="card border-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body text-primary"><h5class="card-title">Primary заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card border-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body text-secondary"><h5class="card-title">Secondary заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body text-success"><h5class="card-title">Success заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card border-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body text-danger"><h5class="card-title">Danger заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card border-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body text-warning"><h5class="card-title">Warning заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card border-info mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body text-info"><h5class="card-title">Info заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card border-light mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body"><h5class="card-title">Light заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div><divclass="card border-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Верхний колонтитул</div><divclass="card-body text-dark"><h5class="card-title">Dark заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div></div>Утилиты миксинов
Вы также можете изменить границы заголовка карточки и «подвала», и даже удалить их background-color с помощью класса .bg-transparent.
Success заголовок карточки
Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.
<divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header bg-transparent border-success">Верхний колонтитул</div><divclass="card-body text-success"><h5class="card-title">Success заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе заголовка карточек и составляющих основную часть содержимого карточки.</p></div><divclass="card-footer bg-transparent border-success">Нижний колонтитул</div></div>Расположение карточек
В дополнение к стилизации содержимого карточек, Bootstrap включает несколько параметров расположения серий карточек. В настоящее время эти параметры не являются отзывчивыми.
Группы карточек
Используйте их для отрисовки карточек как единого, прикрепленного элемента с колонками равной ширины и высоты. Группы карточек используют display: flex; для достижения таких свойств размеров.
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление: 3 мин. назад
Заголовок карточки
Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.
Последнее обновление: 3 мин. назад
Заголовок карточки
Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
Последнее обновление: 3 мин. назад
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div></div>При использовании групп карточек с нижним колонтитулом их содержимое будет автоматически выровнено.
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.
Заголовок карточки
Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></div></div></div>«Карточный стол»
Нужен набор карточек равной ширины и высоты, не прикрепленных друг к другу? Используйте «карточный стол».
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление: 3 мин. назад
Заголовок карточки
Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.
Последнее обновление: 3 мин. назад
Заголовок карточки
Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
Последнее обновление: 3 мин. назад
<divclass="card-deck"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div></div>Как и в случае с группами карточек, нижние колонтитулы карточек в колодах автоматически выстраиваются в линию.
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.
Заголовок карточки
Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
<divclass="card-deck"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></div></div></div>Сеточные карты
Используйте систему сеток Bootstrap и ее классы .row-cols classes чтобы контролировать количество отображаемых в строке столбцов сетки (обернутых вокруг ваших карт). Например, указав .row-cols-1 карты раскладываются по одному столбцу, а указав .row-cols-md-2 разбивает четыре карты на равную ширину по нескольким рядам от средней до точки останова.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
<divclass="row row-cols-1 row-cols-md-2"><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p></div></div></div><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div></div>Измените его на .row-cols-3, и Вы увидите обертку четвертой карты.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
<divclass="row row-cols-1 row-cols-md-3"><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p></div></div></div><divclass="col mb-4"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div></div>Если Вам нужна одинаковая высота, добавьте к карточкам .h-100. Если Вы хотите по умолчанию одинаковые высоты, Вы можете установить $card-height: 100% в Sass.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это короткая карточка.
Заголовок карточки
Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
<divclass="row row-cols-1 row-cols-md-3"><divclass="col mb-4"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col mb-4"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это короткая карточка.</p></div></div></div><divclass="col mb-4"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p></div></div></div><divclass="col mb-4"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div></div>Колонки карточек
Карточки можно выстроить в Masonry-подобные колонки с помощью CSS, обернув их в .card-columns. Для облегчения выравнивания карточки созданы на основе column, а не на flexbox.
Внимание! Размеры карточек могут быть разными, поэтому положение колонок тоже может разниться. Чтобы карточки не выходили из колонок, задайте display: inline-block, т.к. column-break-inside: avoid не совсем рабочее решение.
Заголовок карточки that wraps to a new line
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
A well-known quote, contained in a blockquote element.
Заголовок карточки
Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.
Последнее обновление: 3 мин. назад
A well-known quote, contained in a blockquote element.
Заголовок карточки
У этой карточки есть обычный заголовок и короткий абзац текста под ним.
Последнее обновление: 3 мин. назад
A well-known quote, contained in a blockquote element.
Заголовок карточки
Это еще одна карточка с заголовком и вспомогательным текстом ниже. У этой карточки есть дополнительный контент, чтобы сделать ее в целом немного выше.
Последнее обновление: 3 мин. назад
<divclass="card-columns"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки that wraps to a new line</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div><divclass="card p-3"><blockquoteclass="blockquote mb-0 card-body"><p>A well-known quote, contained in a blockquote element.</p><footerclass="blockquote-footer"><smallclass="text-muted"> Кто-то известный в <citetitle="Названии Источника">Названии Источника</cite></small></footer></blockquote></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Эта подсказка имеет вспомогательный текст ниже как естественный ввод к дополнительному контенту.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div><divclass="card bg-primary text-white text-center p-3"><blockquoteclass="blockquote mb-0"><p>A well-known quote, contained in a blockquote element.</p><footerclass="blockquote-footer text-white"><small> Кто-то известный в <citetitle="Названии Источника">Названии Источника</cite></small></footer></blockquote></div><divclass="card text-center"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">У этой карточки есть обычный заголовок и короткий абзац текста под ним.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div><divclass="card"><imgsrc="..."class="card-img"alt="..."></div><divclass="card p-3 text-right"><blockquoteclass="blockquote mb-0"><p>A well-known quote, contained in a blockquote element.</p><footerclass="blockquote-footer"><smallclass="text-muted"> Кто-то известный в <citetitle="Названии Источника">Названии Источника</cite></small></footer></blockquote></div><divclass="card"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это еще одна карточка с заголовком и вспомогательным текстом ниже. У этой карточки есть дополнительный контент, чтобы сделать ее в целом немного выше.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление: 3 мин. назад</small></p></div></div></div>Колонки карточек также можно растянуть и настроить с помощью кода. Ниже показано расширение класса .card-columns с использованием такого же CSS, как мы использовали в колонках, - который создает набор отзывчивых ярусов для изменения числа колонок.
.card-columns{@include media-breakpoint-only(lg){column-count:4;}@include media-breakpoint-only(xl){column-count:5;}}