картки

Картки Bootstrap забезпечують гнучкий і розширюваний контейнер вмісту з кількома варіантами та параметрами.

На цій сторінці

про

Картка — це гнучкий і розширюваний контейнер вмісту. Він містить параметри для верхніх і нижніх колонтитулів, різноманітний вміст, контекстні фонові кольори та потужні параметри відображення. Якщо ви знайомі з Bootstrap 3, картки замінюють наші старі панелі, колодязі та мініатюри. Подібні до цих компонентів функції доступні як класи-модифікатори для карток.

приклад

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

Нижче наведено приклад базової картки зі змішаним вмістом і фіксованою шириною. Картки не мають фіксованої початкової ширини, тому вони природним чином заповнять всю ширину свого батьківського елемента. Це легко налаштувати за допомогою наших різноманітних варіантів розміру .

Назва картки

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

Іди кудись

html

<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. Використовуйте його щоразу, коли вам потрібна м’яка частина картки.

Це певний текст у тілі картки.

html

<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елементі, заголовок картки та підзаголовок добре вирівнюються.

Назва картки

Підзаголовок картки

Посилання на картку Ще одне посилання

html

<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.

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>

Список груп

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

Предмет
Другий пункт
Третій пункт

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Рекомендовані

Предмет
Другий пункт
Третій пункт

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Предмет
Другий пункт
Третій пункт

Нижній колонтитул картки

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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

Змішайте та поєднуйте кілька типів вмісту, щоб створити потрібну картку, або додайте все туди. Нижче наведено стилі зображень, блоки, стилі тексту та групу списку — усі вони обернуті карткою фіксованої ширини.

Назва картки

Предмет
Другий пункт
Третій пункт

Посилання на картку Ще одне посилання

html

<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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Додайте необов’язковий верхній та/або нижній колонтитул на картку.

Рекомендовані

Особливий режим титулу

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

Іди кудись

html

<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*>елементів.

Особливий режим титулу

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

Іди кудись

html

<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>

Цитата

Добре відома цитата, що міститься в елементі blockquote.

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

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Рекомендовані

Особливий режим титулу

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

Іди кудись

2 дні тому

html

<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 або утиліт.

Використання розмітки сітки

Використовуючи сітку, розкладіть картки по стовпцях і рядках за потреби.

Особливий режим титулу

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

Іди кудись

Особливий режим титулу

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

Іди кудись

html

<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>

Використання утиліт

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

Назва картки

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

Кнопка

Назва картки

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

Кнопка

html

<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 у своїх таблицях стилів або як вбудовані стилі, щоб установити ширину.

Особливий режим титулу

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

Іди кудись

html

<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>

Вирівнювання тексту

Ви можете швидко змінити вирівнювання тексту будь-якої картки — цілком або окремих частин — за допомогою наших класів вирівнювання тексту .

Особливий режим титулу

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

Іди кудись

Особливий режим титулу

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

Іди кудись

Особливий режим титулу

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

Іди кудись

html

<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-end" 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 .

Особливий режим титулу

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

Іди кудись

html

<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" aria-current="true" 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">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>

Особливий режим титулу

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

Іди кудись

html

<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">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 хвилини тому

html

<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-bottom" alt="...">
</div>

Накладання зображень

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

Назва картки

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Зверніть увагу, що вміст не повинен перевищувати висоту зображення. Якщо вміст більший за зображення, вміст відображатиметься за межами зображення.

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

Використовуючи комбінацію сітки та службових класів, картки можна зробити горизонтальними, зручними для мобільних пристроїв і адаптованими. У наведеному нижче прикладі ми видаляємо жолоби сітки за допомогою класів .g-0і використовуємо .col-md-*, щоб зробити картку горизонтальною в точці mdрозриву. Залежно від вмісту картки можуть знадобитися додаткові налаштування.

Назва картки

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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>

Стилі карток

Картки містять різні параметри для налаштування фону, рамок і кольору.

Фон і колір

Додано у v5.2.0

Встановіть background-colorконтрастний передній план colorразом з нашими .text-bg-{color}помічниками . Раніше потрібно було вручну об’єднати ваш вибір .text-{color}і .bg-{color}утиліти для стилізації, якими ви все ще можете користуватися, якщо хочете.

Заголовок

Назва основної картки

Заголовок

Назва вторинної картки

Заголовок

Назва картки успіху

Заголовок

Назва картки небезпеки

Заголовок

Назва картки попередження

Заголовок

Назва інформаційної картки

Заголовок

Світла назва картки

Заголовок

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

html

<div class="card text-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-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-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-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-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-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 text-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-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>

Передача значення допоміжним технологіям

Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .visually-hiddenкласом.

Кордон

Використовуйте утиліти кордону, щоб змінити лише border-colorкартку. Зауважте, що ви можете розмістити .text-{color}класи на батьківській .cardкартці або підмножині вмісту картки, як показано нижче.

Заголовок

Назва основної картки

Заголовок

Назва вторинної картки

Заголовок

Назва картки успіху

Заголовок

Назва картки небезпеки

Заголовок

Назва картки попередження

Заголовок

Назва інформаційної картки

Заголовок

Світла назва картки

Заголовок

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

html

<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">
    <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">
    <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.

Заголовок

Назва картки успіху

нижній колонтитул

html

<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;для приєднання з однаковими розмірами, починаючи з smточки розриву.

Назва картки

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

Назва картки

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

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

Назва картки

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

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

html

<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 хвилини тому

html

<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>

Сіткові карти

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

Назва картки

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

Назва картки

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

Назва картки

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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і ви побачите обгортку четвертої карти.

Назва картки

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

Назва картки

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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.

Назва картки

Це коротка картка.

Назва картки

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

Назва картки

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

Як і у випадку з групами карток, нижні колонтитули карток вибудовуються автоматично.

Назва картки

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

Назва картки

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

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

Назва картки

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
  <div class="col">
    <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 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>
</div>

Кам'яна кладка

Ми v4використовували лише техніку CSS, щоб імітувати поведінку колон, схожих на масонство , але ця техніка мала багато неприємних побічних ефектів . Якщо ви хочете мати такий тип макета в v5, ви можете просто скористатися плагіном Masonry. Masonry не включено в Bootstrap , але ми зробили демонстраційний приклад , щоб допомогти вам почати роботу.

CSS

Змінні

Додано у v5.2.0

У рамках розвитку підходу Bootstrap до змінних CSS картки тепер використовують локальні змінні CSS .cardдля покращеного налаштування в реальному часі. Значення для змінних CSS встановлюються через Sass, тому налаштування Sass все ще підтримується.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Змінні Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

картки

про

приклад

Назва картки

Типи контенту

Тіло

Заголовки, текст і посилання

Назва картки

Підзаголовок картки

Зображення

Список груп

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

Назва картки

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

Особливий режим титулу

Рекомендовані

Особливий режим титулу

Особливий режим титулу

Розміри

Використання розмітки сітки

Особливий режим титулу

Особливий режим титулу

Використання утиліт

Назва картки

Назва картки

Використання спеціального CSS

Особливий режим титулу

Вирівнювання тексту

Особливий режим титулу

Особливий режим титулу

Особливий режим титулу

Навігація

Особливий режим титулу

Особливий режим титулу

Зображення

Зображення шапки

Назва картки

Назва картки

Накладання зображень

Назва картки

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

Назва картки

Стилі карток

Фон і колір

Назва основної картки

Назва вторинної картки

Назва картки успіху

Назва картки небезпеки

Назва картки попередження

Назва інформаційної картки

Світла назва картки

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

Передача значення допоміжним технологіям

Кордон

Назва основної картки

Назва вторинної картки

Назва картки успіху

Назва картки небезпеки

Назва картки попередження

Назва інформаційної картки

Світла назва картки

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

Утиліти Mixins

Назва картки успіху

Макет картки

Групи карток

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

Сіткові карти

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки