У Bootstrap є елемент, що називається «панель» (Bootstrap card), це звичайний блок з текстом із бордюром та відступами для зручного виділення цього тексту поруч з іншими елементами:

Текстова панель в Bootstrap

Щоб створити текстову панель, додайте потрібного елементу клас .card, а внутрішньому блоку клас .card-body.

<div class="card card-default">
 <div class="card-body">Текст</div>
</div>

Клас .card-default використовується для стилізації панелі. Крім нього є ще кілька класів для інших колірних варіантів оформлення. Дивіться приклади.

Заголовок панелі

Заголовок
Текст

Клас .card-header використовується, щоб додати заголовок до вашої панелі:

<div class="card card-default">
 <div class="card-header">Заголовок</div>
 <div class="card-body">Текст</div>
</div>

Підвал панелі

Текст

Підвал або footer створюється за допомогою класу .card-footer й служить для оформлення блоку під контентом панелі:

<div class="card card-default">
 <div class="card-body">Текст</div>
 <div class="card-footer">Підвал</div>
</div>

Групування панелей

Кілька панелей можуть бути об’єднані в одну за допомогою класу .card-group, який потрібно присвоїти їх батьківського елементу.

Заголовок
Текст
Заголовок
Текст
Заголовок
Текст

Використання угруповання зменшує відступи знизу для кожної з панелей:

<div class="card-group">
 <div class="card card-default">
 <div class="card-header">Заголовок</div>
 <div class="card-body">Текст</div>
 </div>
 <div class="card card-default">
 <div class="card-header">Заголовок</div>
 <div class="card-body">Текст</div>
 </div>
 <div class="card card-default">
 <div class="card-header">Заголовок</div>
 <div class="card-body">Текст</div>
 </div>
</div>

Контекстні класи

Панель з класом bg-secondary
Текст
Панель з класом bg-primary
Текст
Панель з класом bg-success
Текст
Панель з класом bg-info
Текст
Панель з класом bg-warning
Текст
Панель з класом bg-danger
Текст

Щоб змінювати стандартний колір текстової панелі, ви можете використовувати класи .card-default, .card-primary, .bg-success, .bg-info,.card-warning і .bg-danger:

<div class="card-group text-white">
 <div class="card bg-secondary">
 <div class="card-header">Панель з класом bg-secondary</div>
 <div class="card-body">Текст</div>
 </div>
 <div class="card bg-primary text-white">
 <div class="card-header">Панель з класом bg-primary</div>
 <div class="card-body">Текст</div>
 </div> 
 <div class="card bg-success">
 <div class="card-header">Панель з класом bg-success</div>
 <div class="card-body">Текст</div>
 </div>
 <div class="card bg-info text-white">
 <div class="card-header">Панель з класом bg-info</div>
 <div class="card-body">Текст</div>
 </div>
 <div class="card bg-warning">
 <div class="card-header">Панель з класом bg-warning</div>
 <div class="card-body">Текст</div>
 </div>
 <div class="card bg-danger">
 <div class="card-header">Панель з класом bg-danger</div>
 <div class="card-body">Текст</div>
 </div>
</div>

Коменти

Elena

Отличный урок! На русском языке практически нет доступной и полезной информации по BS. Спасибо!

seogrot

Отличный урок! Спасибо. Как-то я удачно попал на Ваш блог, буквально пару дней назад думал немного с Bootstrap разобраться. Пошёл читать первый урок;)