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

Основні можливості

• Заголовок і підвал: Картки можуть містити секції заголовка та підвалу для додаткового контексту або дій, пов'язаних із контентом;
• Зображення: Картки підтримують додавання зображень, що дозволяє розміщувати візуальний контент поряд із текстовою інформацією;
• Текстовий контент: У тілі картки можна розміщувати текстовий контент, такий як заголовки, описи й додаткову інформацію;
• Кнопки: Компонент картки Bootstrap дозволяє інтегрувати кнопки для таких дій, як перегляд деталей, додавання до кошика або вподобання контенту;
• Різноманіття стилів: Bootstrap пропонує різні стилі та макети карток для різних дизайнерських потреб, включаючи картки з фоном, рамками та тінями.

Класи використання

• card: Базовий клас для створення контейнера картки;
• card-header: Додає стилізацію для секції заголовка в картці;
• card-footer: Додає стилізацію для секції підвалу в картці;
• card-img-top: Розміщує зображення у верхній частині картки;
• card-body: Контейнер для основного контенту картки, такого як текст і кнопки;
• card-title: Стилізує заголовок контенту картки;
• card-text: Стилізує текстовий контент картки;
• btn: Застосовує стилі кнопок Bootstrap до кнопок у картці;
• btn-primary, btn-secondary тощо: Застосовують певні кольорові стилі кнопок у картці.

Приклад 1: Базова картка

Приклад 2: Картка з заголовком і нижнім колонтитулом

Приклад 3: Картка з зображенням