Карты

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

О

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

Пример

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

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

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

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

Иди куда-нибудь

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

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

Список групп

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

Крас Хусто Одио
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>

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

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

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

Крас Хусто Одио
Dapibus ac facilis в
Вестибюль у эроса

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

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

Избранное

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

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

Иди куда-нибудь

2 дня назад

<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="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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>

Картинки

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

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

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

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

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

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

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

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

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <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 src="..." class="card-img-top" alt="...">
</div>

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

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

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

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

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <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>

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

Горизонтальный

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

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

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <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>
</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;для достижения одинакового размера.

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

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

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

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

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

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

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

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

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

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

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

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

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

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

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

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

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

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

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

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

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

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

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

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

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

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

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

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

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

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

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

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

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

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

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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>

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

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

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

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

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

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

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

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

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

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

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

Это короткая карта.

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

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Столбцы карт

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

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

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

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

Кто-то известный в Source Title

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

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

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

Кто-то известный в Source Title

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

Эта карточка имеет обычный заголовок и короткий абзац текста под ним.

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

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

Кто-то известный в Source Title

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

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

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

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 src="..." class="card-img-top" alt="...">
    <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 text-white">
        <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 a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</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;
  }
}

Карты

О

Пример

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

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

Тело

Заголовки, текст и ссылки

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

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

Картинки

Список групп

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

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

Верхний и нижний колонтитулы

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

Избранное

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

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

Размеры

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

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

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

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

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

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

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

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

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

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

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

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

Навигация

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

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

Картинки

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

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

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

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

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

Горизонтальный

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

Стили карт

Фон и цвет

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

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

Название карты успеха

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

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

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

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

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

Передача смысла вспомогательным технологиям

Граница

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

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

Название карты успеха

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

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

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

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

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

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

Название карты успеха

Макет карты

Группы карт

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

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

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

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

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

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

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

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

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

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

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

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

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

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