Карты Bootstrap 5

Карта

Карта Bootstrap 5 - это рамка с рамкой, вокруг содержимого которой есть некоторые внутренние поля. Она включает заголовок, нижний колонтитул, содержимое, цвет и другие параметры.

Базовая карта

Карта на основе .card Класс созданный, содержимое карты имеет .card-body Класс:

Пример

<div class="card">
  <div class="card-body">Базовая карта</div>
</div>

Попробуйте сами

Заголовок и нижний колонтитул

.card-header Добавьте заголовок к карте с помощью класса:.card-footer Добавьте нижний колонтитул к карте с помощью класса:

Пример

<div class="card">
  <div class="card-header">Заголовок</div>
  <div class="card-body">Содержимое</div>
  <div class="card-footer">Нижний колонтитул</div>
</div>

Попробуйте сами

Контекстная карта

Чтобы добавить цвет фона карты, используйте контекстные классы:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Пример

Попробуйте сами

заголовок, текст и ссылку

Используйте .card-title Добавьте заголовок карты к любому элементу заголовка. Если <p> элемент является .card-body Последний подэлемент (или единственный подэлемент) в .card-text Класс используется для удаления <p> Нижний отступ элемента..card-link Добавить синий цвет и эффект при наведении к любым ссылкам.

Пример

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Заголовок карты</h4>
    <p class="card-text">Некоторый примерный текст. Некоторый примерный текст.</p>
    <a href="#" class="card-link">Ссылка карты</a>
    <a href="#" class="card-link">Ещё одна ссылка</a>
  </div>
</div>

Попробуйте сами

Изображение карты

Перевести .card-img-top или .card-img-bottom Добавить в <img>Изображение можно разместить на вершине или снизу карты.

Обратите внимание, что мы добавили изображение вне .card-body, чтобы оно занимало всю ширину:

Пример

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Изображение карты">
  <div class="card-body">
    <h4 class="card-title">Билл Гейтс</h4>
    <p class="card-text">Билл Гейтс — программист и инженер. Некоторый примерный текст. Некоторый примерный текст.</p>
    <a href="#" class="btn btn-primary">Просмотреть профиль</a>
  </div>
</div>

Попробуйте сами

Накладка изображения карты

Перевести изображение в фоновый цвет карты и использовать .card-img-overlay Добавить текст в верхнюю часть изображения:

Пример

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Изображение карты">
  <div class="card-img-overlay">
    <h4 class="card-title">Билл Гейтс</h4>
    <p class="card-text">Некоторый примерный текст. Некоторый примерный текст.</p>
    <a href="#" class="btn btn-primary">Просмотреть профиль</a>
  </div>
</div>

Попробуйте сами