картки

Картки 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>

Список груп

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

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

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

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

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

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

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

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

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

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

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

Назва картки

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

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

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

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

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

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

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

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

Іди кудись

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

Цитата

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

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

<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 дні тому

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

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

Назва картки

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

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

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

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

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

Назва картки

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

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

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

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

Назва картки

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

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

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

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

Назва картки

Це ще одна картка з назвою та допоміжним текстом нижче. Ця картка має додатковий вміст, щоб зробити її трохи вищою загалом.

Востаннє оновлено 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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</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

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

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

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

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

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

Навігація

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

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

Зображення

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

Назва картки

Назва картки

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

Назва картки

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

Назва картки

Стилі карток

Фон і колір

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

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

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

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

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

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

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

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

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

Кордон

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

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

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

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

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

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

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

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

Утиліти Mixins

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

Макет картки

Групи карток

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

Карткові колоди

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

Назва картки

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