Source

Карты

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

О

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

Пример

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

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

100%x180
Название карты

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

Иди куда-нибудь
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">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 somewhere</a>
  </div>
</div>

Типы контента

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

Тело

Строительным элементом карты является файл .card-body. Используйте его всякий раз, когда вам нужен дополнительный раздел внутри карточки.

Это какой-то текст в теле карточки.
<div class="card">
  <div class="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элементе, заголовок карточки и подзаголовок хорошо выровнены.

Название карты
Подзаголовок карты

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

Ссылка на карту Другая ссылка
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</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 link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Картинки

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

Ограничение изображения [100%x180]

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

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

Список групп

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

  • Крас Хусто Одио
  • Dapibus ac facilis в
  • Вестибюль у эроса
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Избранное
  • Крас Хусто Одио
  • Dapibus ac facilis в
  • Вестибюль у эроса
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Кухонная мойка

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

Ограничение изображения [100%x180]
Название карты

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

  • Крас Хусто Одио
  • Dapibus ac facilis в
  • Вестибюль у эроса
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">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>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Избранное
Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

Избранное
Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Цитировать

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

Кто-то известный в Source Title
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Избранное
Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </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">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

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

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

Название карты

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Кнопка
Название карты

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Кнопка
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

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

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

Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Добавьте некоторую навигацию в заголовок карты (или блок) с помощью компонентов навигации Bootstrap .

Особая обработка титула

С сопровождающим текстом ниже, как естественным вводом к дополнительному контенту.

Иди куда-нибудь
<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" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Картинки

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

Ограничения изображений

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

100%x180
Название карты

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

Последнее обновление 3 минуты назад

Название карты

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

Последнее обновление 3 минуты назад

100%x180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">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 ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">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 ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

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

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

100%x270
Название карты

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

Последнее обновление 3 минуты назад

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">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 ago</p>
  </div>
</div>

Стили карт

Карточки включают различные параметры для настройки их фона, границ и цвета.

Фон и цвет

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

Заголовок
Название основной карты

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

Заголовок
Название вторичной карты

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

Заголовок
Название карты успеха

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

Заголовок
Название карты опасности

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

Заголовок
Название предупреждающей карточки

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

Заголовок
Название информационной карты

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

Заголовок
Название световой карты

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

Заголовок
Название темной карты

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

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary 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>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary 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>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success 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>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger 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>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning 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>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info 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>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light 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>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark 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>
  </div>
</div>
Передача смысла вспомогательным технологиям

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

Граница

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

Заголовок
Название основной карты

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

Заголовок
Название вторичной карты

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

Заголовок
Название карты успеха

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

Заголовок
Название карты опасности

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

Заголовок
Название предупреждающей карточки

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

Заголовок
Название информационной карты

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

Заголовок
Название световой карты

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

Заголовок
Название темной карты

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

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

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

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

Заголовок
Название карты успеха

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

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success 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>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Макет карты

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

Группы карт

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

100%x180
Название карты

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

Последнее обновление 3 минуты назад

100%x180
Название карты

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

Последнее обновление 3 минуты назад

100%x180
Название карты

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

Последнее обновление 3 минуты назад

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
</div>

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

100%x180
Название карты

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

100%x180
Название карты

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

100%x180
Название карты

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small>
    </div>
  </div>
</div>

Карточные колоды

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

100%x200
Название карты

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

Последнее обновление 3 минуты назад

100%x200
Название карты

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

Последнее обновление 3 минуты назад

100%x200
Название карты

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

Последнее обновление 3 минуты назад

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
</div>

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

100%x180
Название карты

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

100%x180
Название карты

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

100%x180
Название карты

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small>
    </div>
  </div>
</div>

Столбцы карт

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

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

100%x160
Название карты, которое переносится на новую строку

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

Кто-то известный в Source Title
100%x160
Название карты

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

Последнее обновление 3 минуты назад

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число возможно.

Кто-то известный в Source Title
Название карты

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

Последнее обновление 3 минуты назад

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

Кто-то известный в Source Title
Название карты

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

Последнее обновление 3 минуты назад

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">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 ago</small></p>
    </div>
  </div>
</div>

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

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