Как создать карточки на Bootstrap и какие опции они предоставляют?

Пользователь

от aaron_armstrong , в категории: HTML/CSS , 6 месяцев назад

Как создать карточки на Bootstrap и какие опции они предоставляют?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от christine , 4 месяца назад

@aaron_armstrong 

Для создания карточек на Bootstrap необходимо использовать классы "card" и "card-body". Карточки в Bootstrap предоставляют следующие опции:

  1. Заголовок - использование класса "card-header" позволяет добавить заголовок карточки.
  2. Текст - можно использовать класс "card-text" для отображения текста внутри тела карточки.
  3. Изображения - можно добавить изображение внутрь карточки, используя классы "card-img-top", "card-img-bottom" или "card-img".
  4. Нижнее содержимое - можно добавить содержимое под телом карточки с помощью класса "card-footer".
  5. Фон карточки - можно настроить фон карточки, используя класс "bg-", где "" - это цвет фона.


Пример использования классов Bootstrap для создания карточки:

1
2
3
4
5
6
7
8
<div class="card">
  <img class="card-img-top" src="...">
  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Текст карточки</p>
    <a href="#" class="btn btn-primary">Кнопка</a>
  </div>
</div>