Bootstrap 4. Компонент Cards.

Всем привет! В этой статье мы продолжим изучать Bootstrap 4 и рассмотрим компонент под названием Cards.

Cards – это компонент, который позволяет создавать блоки в виде карточек. Чтобы лучше понять, как это выглядит, перейдите на официальный сайт Bootstrap 4. Давайте создадим несколько. Я сразу приведу нужный код, а затем мы разберем, что там происходит.

Итак, давайте разбираться. Сначала мы создаем контейнер, в котором указан класс text-muted. Этот класс делает текст светлым, чтобы он лучше выглядел в карточках. Дальше создаем строку, в которой будут наши карточки размером 6 колонок для средних размеров экрана и 3 для маленьких размеров экрана. Потом мы начинаем создавать отдельную карточку. Для этого мы используем блок с классом card. В этой карточке сверху будет изображение и, чтобы это изображение автоматически растягивалось на всю ширину блока карточки и подстраивалось по высоте, мы применяем класс img-fluid. Класс card-img-top нужен для того, чтобы изображение было сверху. Далее мы создаем блок с классом card-block, в котром будет содержимое нашей карточки в виде текста. Сверху у нас будет заголовок, следовательно, мы используем тег h3 с классом card-title, а дальше сам текст – параграф с классом card-text. Таких карточек мы создаем несколько, просто копируя их код и меняя содержимое.

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

А на этом сегодня все. Спасибо за внимание!