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>

Список груп

Створюйте списки вмісту на картці за допомогою групи змивних списків.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Вестибулум і ерос
<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>
Рекомендовані
  • Cras justo odio
  • Dapibus ac facilisis in
  • Вестибулум і ерос
<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]
Назва картки

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Вестибулум і ерос
<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. Ціле число posuere erat a ante.

Хтось відомий у назві джерела
<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>

Утиліти Mixins

Ви також можете змінити межі верхнього та нижнього колонтитулів картки за потреби та навіть видалити їх 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% х 200
Назва картки

Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.

Востаннє оновлено 3 хвилини тому

100% х 200
Назва картки

Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.

Востаннє оновлено 3 хвилини тому

100% х 200
Назва картки

Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Ця підказка має навіть довший вміст, ніж перша, яка показує дію рівної висоти.

Востаннє оновлено 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 , лише за допомогою CSS, обернувши їх у .card-columns. Картки створено з columnвластивостями CSS замість flexbox для легшого вирівнювання. Картки розташовані зверху вниз і зліва направо.

Голови вгору! Ваш пробіг із стовпцями картки може відрізнятися. Щоб запобігти розриву карток по стовпцях, ми маємо налаштувати їх на те display: inline-block, що column-break-inside: avoidце ще не куленепробивне рішення.

100%x160
Заголовок картки, який переноситься на новий рядок

Це довша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Цей вміст трохи довший.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

Хтось відомий у назві джерела
100%x160
Назва картки

Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.

Востаннє оновлено 3 хвилини тому

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat.

Хтось відомий у назві джерела
Назва картки

Ця картка має допоміжний текст нижче як природну підказку до додаткового вмісту.

Востаннє оновлено 3 хвилини тому

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

Хтось відомий у назві джерела
Назва картки

Це ширша картка з допоміжним текстом унизу як природним посиланням на додатковий вміст. Ця підказка має навіть довший вміст, ніж перша, яка показує дію рівної висоти.

Востаннє оновлено 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;
  }
}