Bootstrap 4 Card - Оформление контента в виде карточки

Bootstrap 4 Card - Оформление контента в виде карточки
Содержание:
  1. Что такое Card
  2. Создание карточки
  3. Размеры карточки
  4. Выравнивание текстового контента карточки
  5. Цветовая настройка карточки
  6. Макеты для организации коллекции карточек
  7. Как с помощью компонента Card создать Panels
  8. Комментарии

Статья, в которой познакомимся с компонентом Bootstrap 4 Card. Рассмотрим, как он создаётся, настраивается, а также как с помощью него создать элемент интерфейса Bootstrap 3 Panels.

Что такое Card

Card – это компонент Bootstrap 4, который позволяет оформить контент в виде карточки.

Bootstrap 4 - Card

Карточка имеет гибкую структуру. Это означает, что её можно представить по-разному, например:

  • с заголовком (футером) или без него;
  • с использованием картинки (её можно расположить в верхней или нижней части) или без неё;
  • с произвольным количеством элементов и их расположением в основной части.

Кроме этого карточке можно ещё очень просто придать нужное цветовое оформление. Задать ей необходимый цвет фона, текста и границ.

Если вы использовали Bootstrap 3, то знаете, что компонента Card в нём нет. Данный компонент появился только в 4 версии и может использоваться в качестве замены таких компонентов Bootstrap 3 как Panels, Wells и Thumbnails.

Создание карточки

Создание карточки осуществляется посредством добавления к HTML элементу, например, div класса card.

HTML
<div class="card">
  <!-- Содержимое карточки... -->
</div>
HTML
<div class="card">
  <div class="card-body"><!-- Начало текстового контента -->
      Этот текст расположен внутри card-body...
  </div><!-- Конец текстового контента -->
</div><!-- Конец карточки -->
Bootstrap 4 Card с простым текстовым контентом

После этого содержимое карточки необходимо наполнить нужным контентом.

Основные строительные фрагменты карточки:

  • card-body (текстовый контент);
  • card-img-top или card-img-bottom (изображение);
  • card-img-overlay (текстовый контент над изображением);
  • card-header (заголовок);
  • card-footer (футер);
  • list-group (список).

Добавления к карточке текстового контента (card-body)

Добавление текстового содержимого в карточку осуществляется посредством класса card-body.

HTML
<div class="card-body">
  <!-- Содержимое текстового контента... -->
</div>

Внутри HTML элемента с классом card-body можно использовать следующие классы:

  • card-title (для оформления заголовка);
  • card-subtitle (для стилизации подзаголовка);
  • card-text (для стилизации текста);
  • card-link (для оформления ссылок).

Например:

HTML
<div class="card">
  <div class="card-body"><!-- Начало текстового контента -->
    <h4 class="card-title">Заголовок карточки</h4>
    <h6 class="card-subtitle mb-2 text-muted">Подзаголовок карточки</h6>
    <p class="card-text">Некоторый текст...</p>
    <a href="#" class="card-link">Первая ссылка</a>
    <a href="#" class="card-link">Вторая ссылка</a>
  </div><!-- Конец текстового контента -->
</div><!-- Конец карточки -->
Bootstrap 4 - Card

Классы mb-2 и text-muted а примере используются для дополнительной стилизации подзаголовка. А именно для того чтобы задать отступ margin-bottom и изменить его цвет.

Добавление к карточке изображения (card-img-top или card-img-bottom)

В карточку можно поместить изображение. Осуществляется это с помощью элемента img и класса card-img-top или card-img-bottom. Класс card-img-top используется, когда изображение необходимо расположить в верхней области карточки, а card-img-bottom – в нижней части.

HTML
<!-- Карточка с card-img-top -->
<div class="card">
    <!-- Изображение -->
    <img class="card-img-top" src="..." alt="...">
    <!-- Текстовый контент -->
    <div class="card-body">
        <!-- ... -->
    </div><
</div><!-- Конец карточки -->

<!-- Карточка с card-img-bottom -->
<div class="card">
    <!-- Текстовый контент -->
    <div class="card-body">
        <!-- ... -->
    </div><
    <!-- Изображение -->
    <img class="card-img-bottom" src="..." alt="...">
</div><!-- Конец карточки -->
Bootstrap 4 - Card с изображением

Добавление к карточке фона (card-img-overlay)

Изображение также можно использовать для создания фона карточки.

В этом варианте карточки текстовый контент будет накладываться на изображение. В зависимости от изображения вам для оформления текстового контента возможно потребуется добавить к нему дополнительные стили.

HTML
<!-- Карточка с card-img-overlay -->
<div class="card">
    <!-- Изображение (фон карточки) -->
    <img class="card-img" src="..." alt="...">
    <!-- Текстовый контент (над изображением) -->
    <div class="card-img-overlay">
        <!-- Текстовое содержимое карточки -->
    </div>
</div><!-- Конец карточки -->
Bootstrap 4 - Card с фоном

Добавления к карточке списка в табличном виде

Добавление в карточку списка List groups осуществляется следующим образом:

HTML
<!-- Карточка с текстовым контентом и списком -->
<div class="card">
    <!-- Текстовый контент -->
    <div class="card-body">
        <!-- Текстовое содержимое карточки -->
    </div>
    <!-- Список List groups -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">1...</li>
        <li class="list-group-item">2...</li>
        <li class="list-group-item">3...</li>
    </ul>
</div><!-- Конец карточки -->

<!-- Карточка с шапкой и списком -->
<div class="card">
    <!-- Шапка (header) карточки -->
    <div class="card-header">
        Шапка карточки
    </div>
    <!-- Список List groups -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">1...</li>
        <li class="list-group-item">2...</li>
        <li class="list-group-item">3...</li>
    </ul>
</div><!-- Конец карточки -->
Bootstrap 4 - Card со списком List groups

Добавление к карточке шапки и (или) футера

Добавление к карточке шапки (header) осуществляется с помощью класса card-header. Его, например, можно добавить к элементу div или h*.

HTML
<!-- Карточка, в которой в качестве элемента шапки используется div -->
<div class="card">
    <!-- Шапка -->
    <div class="card-header">
        Текст шапки...
    </div>
    <!-- Текстовый контент -->
    <div class="card-body">
        ...
    </div>
</div><!-- Конец карточки -->

<!-- Карточка, в которой в качестве элемента шапки используется h4 -->
<div class="card">
    <!-- Шапка -->
    <h4 class="card-header">
        Текст шапки...
    </h4>
    <!-- Текстовый контент -->
    <div class="card-body">
        ...
    </div>
</div><!-- Конец карточки -->
Bootstrap 4 - Card с шапкой

Добавление в карточку футера осуществляется посредством класса card-footer.

HTML
<!-- Карточка с шапкой и футером -->
<div class="card">
    <!-- Шапка -->
    <div class="card-header">
        Текст шапки...
    </div>
    <!-- Текстовый контент -->
    <div class="card-body">
        Текстовый контент...
    </div>
    <!-- Футер -->
    <div class="card-footer">
        Текст футера...
    </div>
</div><!-- Конец карточки -->
Bootstrap 4 - Card с шапкой и футером

Карточка с навигацией (в заголовке)

Добавить навигацию в заголовок карточки можно с помощью компонента Nav.

HTML
<!-- Карточка с навигацией (в заголовке) -->
<div class="card">
    <!-- Шапка с навигацией -->
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#item1">Item 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#item2">Item 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" data-toggle="tab" href="#item3">Item 3</a>
            </li>
        </ul>
    </div>
    <!-- Текстовый контент -->
    <div class="card-body tab-content">
        <div class="tab-pane fade show active" id="item1">
            Некоторое содержимое для Item 1...
        </div>
        <div class="tab-pane fade" id="item2">
            Некоторое содержимое для Item 2...
        </div>
        <div class="tab-pane fade" id="item3">
            Некоторое содержимое для Item 3...
        </div>
    </div>
</div><!-- Конец карточки -->
Bootstrap 4 - Card с навигацией (в заголовке)

Смешивание фрагментов карточки

Вышеперечисленные строительные фрагменты карточки можно смешивать.

Например, спроектируем карточку, состоящую из:

  • card-img-top (изображения);
  • card-body (текстовых контентов);
  • list-group (списка).
HTML
<div class="card">
    <!-- Изображение -->
    <img class="card-img-top" src="..." alt="...">
    <!-- Текстовый контент -->
    <div class="card-body">
        <h4 class="card-title">Заголовок</h4>
        <p class="card-text">...</p>
    </div>
    <!-- Список List groups -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">1...</li>
        <li class="list-group-item">2...</li>
        <li class="list-group-item">3...</li>
    </ul>
    <!-- Текстовый контент -->
    <div class="card-body">
        <a href="#" class="card-link">Ссылка №1</a>
        <a href="#" class="card-link">Ссылка №2</a>
    </div>
</div><!-- Конец карточки -->
Bootstrap 4 - Карточка, состоящая из нескольких контентов

Кроме элементов специально предназначенных для карточки, в ней можно размещать и другие элементы (например, форму):

HTML
<div class="card border-danger">
    <!-- card-header -->
    <div class="card-header bg-danger text-white">
        Найти на сайте
    </div>
    <!-- card-body -->
    <div class="card-body">
        <!-- HTML форма -->
        <form action="#" role="search">
            <div class="input-group">
                <input type="text" name="query" class="form-control" placeholder="Что найти?" value="">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-danger">Поиск</button>
                </span>
            </div>
        </form>
    </div>
</div>
Bootstrap 4 - Карточка внутри которой расположена форма

Размеры карточки

Карточка по умолчанию занимает всю доступную ширину (100%) элемента, в которую она помещена.

Установить размеры карточке можно с помощью классов сетки, вспомогательных классов Bootstrap, CSS и др. способами.

Например, определим ширину карточек с помощью классов сетки Bootstrap:

HTML
<div class="row">
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <!-- Содержимое карточки -->
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="card">
            <!-- Содержимое карточки -->
        </div>
    </div>
</div>

На крохотных и маленьких экранах карточки будут располагаться вертикально (1×4), на средних экранах 2×2, а на больших - на одной горизонтальной линии (4x1).

Например, определим ширину карточек с помощью вспомогательного класса Bootstrap 4 w-*:

<!-- Карточка занимает 75% ширины от доступной ширины родительского элемента -->
<div class="card w-75">
    <!-- Содержимое карточки... -->
</div>

<!-- Карточка занимает 50% ширины от доступной ширины родительского элемента -->
<div class="card w-50">
    <!-- Содержимое карточки... -->
</div>

Установить необходимый размер карточки также можно с помощью CSS (например, посредством свойства width):

HTML
<div class="card" style="width: 300px;">
    <!-- Содержимое карточки... -->
</div>

Выравнивание текстового контента карточки

Выровнять текстовое содержимое карточки или её части можно с помощью следующих дополнительных классов Bootstrap 4:

  • text-left (по умолчанию) - по левому краю;
  • text-right – по правому краю;
  • text-center – по центру.
HTML
<!-- Карточка, у которой текстовый контент выровнен по левому краю -->
<div class="card">
    ...
</div>

<!-- Карточка, у которой текстовый контент выровнен по центру -->
<div class="card text-center">
    ...
</div>

<!-- Карточка, у которой текстовый контент выровнен по правому краю -->
<div class="card text-right">
    ...
</div>

Цветовая настройка карточки

Карточке можно очень просто придать нужное цветовое оформление.

Осуществляется это с помощью следующих вспомогательных классов Bootstrap 4:

  • bg-{color} (например: bg-primary, bg-secondary, bg-success, bg-transparent и др.) – для установки цвета фона;
  • border-{color} (например: border-primary, border-secondary, border-success, border-danger и др.) – для установки цвета границам;
  • text-{color} (например: text-white, text-dark, text-primary, text-secondary, text-success и др.) – для установки цвета тексту.
HTML
<!-- Настройка цвета фона (bg-primary) и текста карточки (text-white) -->
<div class="card text-white bg-primary">
    <div class="card-header">Текст шапки</div>
    <div class="card-body">
        <h4 class="card-title">Заголовок карточки</h4>
        <p class="card-text">Текст карточки...</p>
    </div>
</div>

<!-- Настройка цвета границ (border-primary) -->
<div class="card border-primary">
    <div class="card-header">Текст шапки</div>
    <div class="card-body text-primary">
        <h4 class="card-title">Заголовок карточки</h4>
        <p class="card-text">Текст карточки...</p>
    </div>
</div>
Bootstrap 4 Card - Цветовая настройка

Макеты для организации коллекции карточек

Bootstrap 4 имеет следующие классы для организации коллекции карточек:

  • card-group - представляет набор карточек в виде одного блока (карточки прикреплены друг к другу и имеют одинаковый размер);
  • card-deck - делает карточки одинаковой ширины и высоты, но не прикреплёнными друг к другу;
  • card-columns - предназначен для организации карточек в виде кирпичной кладки Masonry, упорядочиваются они сверху вниз и слева направо (в этом варианте карточки выстроены не с помощью flexbox, а посредством CSS-свойства column).

Макеты для организации коллекции карточек являются пока ещё (в версии Bootstrap 4 Beta 2) не адаптивными.

HTML
<!-- card-group -->
<div class="card-group">
    <!-- карточка №1 -->
    <div class="card">...</div>
    <!-- карточка №2 -->
    <div class="card">...</div>
    <!-- карточка №3 -->
    <div class="card">...</div>
</div>

<!-- card-deck -->
<div class="card-deck">
    <!-- карточка №1 -->
    <div class="card">...</div>
    <!-- карточка №2 -->
    <div class="card">...</div>
    <!-- карточка №3 -->
    <div class="card">...</div>
</div>

<!-- card-columns -->
<div class="card-columns">
    <!-- карточка №1 -->
    <div class="card">...</div>
    <!-- карточка №2 -->
    <div class="card">...</div>
    <!-- карточка №3 -->
    <div class="card">...</div>
</div>
Bootstrap 4 Card - Макеты card-group и card-deck Bootstrap 4 Card - Макет card-columns

В макете организованном с помощью класса card-columns можно очень просто настроить и изменить количество колонок на различных контрольных точках сетки:

HTML
/* 2 колонки на sm */
@media (min-width: 576px) {
    .card-columns {
        -webkit-column-count: 2;
        column-count: 2
    }
}
/* 3 колонки на md */
@media (min-width: 768px) {
    .card-columns {
        -webkit-column-count: 3;
        column-count: 3
    }
}
/* 4 колонки на lg и xl */
@media (min-width: 992px) {
    .card-columns {
        -webkit-column-count: 4;
        column-count: 4
    }
}

Как с помощью компонента Card создать Panels

Пример, как с помощью Bootstrap 4 Card можно очень просто создать элемент интерфейса Bootstrap 3 Panels.

HTML
<!-- Карточка (border-primary - цвет границ карточки) -->
<div class="card border-primary">
    <!-- Шапка (bg-primary - цвет фона, text-white - цвет текста) -->
    <div class="card-header bg-primary text-white">
            Название панели
    </div>
    <!-- Текстовый контент -->
    <div class="card-body">
        <h4 class="card-title">Заголовок</h4>
        <p class="card-text">...</p>
        <a href="#" class="btn btn-primary">Ссылка</a>
    </div>
</div><!-- Конец карточки -->
Создание с помощью Bootstrap 4 Card панелей (Bootstrap 3 Panels)

Комментарии: 34

andrey1
andrey1

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

Александр Мальцев
Александр Мальцев

Например, имеются две карточки:

<div class="card">
  <div class="card-body">
  <h5 class="card-title">Title</h5>
  <p class="card-text">Text...</p>
  <a href="#" class="card-link">Link</a>
  </div>
</div>

<div class="card">
  <div class="card-body">
  <h5 class="card-title">Title</h5>
  <p class="card-text">Text...</p>
  <a href="#" class="card-link">Link</a>
</div>
Пример скрипта:
document.addEventListener('click', (e) => {
  // если пользователь кликнул на .card-link
  if (e.target && e.target.closest('.card-link')) {
    e.preventDefault();
    // получаем карточку, внутри которой пользователь нажал на .card-link
    const elCard = e.target.closest('.card');
    // получаем внутри карточки заголовок
    const elCardTitle = elCard.querySelector('.card-title');
    // изменяем текст заголовка на другой
    elCardTitle.textContent = 'Новый заголовок';
  }
});
andrey1
andrey1

Извените, а как это без ява скрипт? У меня есть шаблон карточки, которые через цикл показываются по 10 штук на странице, но при нажимании на кнопки в каждой карточке, изменения показываются только в первой карточке

!

</a></p>

![](/assets/images/storage/0538f48e994a0f9c2a226754c7d2cd06.png)

Vic
Vic
Александр, доброго времени!

Подскажите, а можно ли как-то картинку карточки выставить по горизонтали по центру (если картинка не на всю ширину карточки)?
Александр Мальцев
Александр Мальцев
Привет!
Для выравнивания по центру можно использовать класс mx-auto:
<img class="mx-auto" src="..." alt="...">
Vic
Vic
Понял, спасибо!
Алексей Макаров
Алексей Макаров
Добрый день! Можно сделать, что бы Card меняла цвет в зависимости от содержимого? Например, пользователь выбирает из выпадающего списка слово «Важное» и Card становится красным (к примеру)?
Александр Мальцев
Александр Мальцев
Привет!
Для этого нужно написать JavaScript (открыть пример). Например, так:
$('.change-theme .dropdown-item').click(function () {
  var card = $(this).closest('.card');
  var part = /bg-[^ ]*/g;
  var newTheme = $(this).text();
  var currentTheme = card.prop('class').match(part)[0];
  card.removeClass(currentTheme).addClass(newTheme);
});
Алексей Макаров
Алексей Макаров
Здравствуйте!
Наверное, мне даже этот скрипт не нужен будет, т.к. карточки загружаются уже с информацией и статусом (Важное, Среднее). Но не нашел такого в Bootstrap, как задавать цвет карточки при загрузке…
Александр Нижник
Александр Нижник
Здравствуйте! В макете организованном с помощью класса card-columns можно ли сделать так, что -бы карточки сортировались слева направо, а не сверху вниз
Александр Мальцев
Александр Мальцев
Здравствуйте! Нет такой стандартной возможности.
Петр
Петр
Добрый день! У меня такой вопрос: можно ли сделать так, чтобы пользователь мог двигать карточки, закрывать и, чтоб на место этой карточки всплывала другая? И так далее… или они привязаны строго к одному месту на сайте и не могут ни двигаться, ни подгружаться? В принципе такой функционал можно сделать используя bootstrp исходники?
Александр Мальцев
Александр Мальцев
Добрый день! В Bootstrap карточки — это просто набор стилей. К ним не привязан какой-то JavaScript код. Для реализации описанного функционала вам нужно просто написать его на JavaScript, исходники Bootstrap тут не нужны. Сам функционал у вас будет просто вставка и удаление элементов из DOM (карточек).
Петр
Петр
Спасибо, что ответили.
aralov.mykhailo
aralov.mykhailo
День добрый.
Как бы вы решили такую задачу (бутстрап или без).
Есть карточки с превью новости/статьи ну или карточка товар сверху картинка, контент добавляется через админку пользователем. Как сделать что картинка в карточках всегда была одной высоты по при это изображение не искажалось. Как максимально «обезопасить» вёрстку от пользователя. Ведь не известно какого размера туда всунут картинку и не хотелось бы, чтобы из-за этого карточки «поплыли»
Спасибо.
Александр Мальцев
Александр Мальцев
Привет! Можно картинки устанавливать в виде фона (background). Такой пример есть в этой статье.
aralov.mykhailo
aralov.mykhailo
Привет, спасибо за ответ. Отличный способ спасибо, но если картинки имеют значения как контент, а не фон. предполагаю использовать object-fit: Cover; в паре с полифилом для ИЕ
Александр Мальцев
Александр Мальцев
Да, в этом случае тогда нужно так. Другой вариант — это выполнить всё это дело на стороне сервере. Например, используя phpThumb для создания нужных миниатюр изображений. Или что-то другое в зависимости от того, что вы на стороне сервера применяете.
ctac
ctac
Как всегда, спасибо за полезную статью.
Но такой, не тривиальный вопрос. Предположим, у нас есть кратное 3 кол-во элементов, например, 33. Вот они все выстроились в 3 ряда, понятно, что 1 или 2 с большой вероятностью выбьются из списка. т.е. одна из частей буде ниже других, так вот вопрос, можно как-то вставить, элементы что бы визуально эти блоки были на одно уровне?
Надеюсь, понятно объяснил. Спасибо.
Александр Мальцев
Александр Мальцев
Пожалуйста!
Вы хотите сделать чтобы карточки имели одну высоту? Если да, то это можно решить с помощью следующего скрипта:
(function(){
  var maxHeight = 0;
  $('.card').each(function(){
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  $('.card').each(function(){
    $(this).css('min-height', maxHeight);
  });
})();
Он сначала определит какая из карточек имеет максимальную высоту, а затем установит её всем карточкам.
Vlad
Vlad
шикарная статья!
Еще бы в конце инфа, как внизу карточки сделать спойлер, чтобы выпадал спрятанный текст, вообще бы было идеально )
Александр Мальцев
Александр Мальцев
Спасибо!
Для этого случая в Bootstrap имеется компонент Collapse.
Т.е. чтобы это выполнить просто добавьте в содержимое карточки следующее:
<a data-toggle="collapse" href="#collapseExample">Показать</a>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Контент, который нужно показать при нажатии на ссылку
  </div>
</div>
Vlad
Vlad
попробоавл этот код-почему то спойлер открыт и не закрывается.
Александр Мальцев
Александр Мальцев
Может что-то не то делаете. Вот пример.
Vlad
Vlad
а, так там помимо дивов еще скрипты надо кинуть? а где их взять?
Александр Мальцев
Александр Мальцев
Как установить Bootstrap можете почитать в этой статье.
Vlad
Vlad
спасибо, помогло!
последний вопрос — как сделать всю карточку кликабельной, то есть ссылкой?
сам никак не догоню.
Александр Мальцев
Александр Мальцев
Можно обернуть карточку в тег <a> и прописать стили для стилизации элементов так как вам в этом случае нужно:
<a href="#">
  <div class="card">
    ...
  </div>
</a>
Другой вариант — это написать сценарий на JavaScript, который будет при нажатии в любом месте карточки осуществлять переход на URL, указанный в ней с помощью атрибута data-target:
<div class="card" data-target="#">
  ...
</div>

...
$(function() {
  $(document).on('click', function(e){
    if ($(e.target).closest('.card').is('[data-target]')) {
      e.preventDefault();
      location.href = $(e.target).closest('.card').attr('data-target');
    }
  });
});
Vlad
Vlad
спасибо огромное!
Алексей
Алексей
А подскажите как при изменении высоты заголовка изменять отступы у всех заголовков?
К примеру есть 3 карточки, в одной заголовок в 2 строки, соответственно текст после заголовка будет ниже, относительно других блоков.
jsfiddle.net/9kut14rL/2/
Александр Мальцев
Александр Мальцев
Только с помощью JavaScript. Если это нужно, тогда лучше установить не отступы, а минимальную высоту.
Например, так:
var maxHeight = 0;
$('.card-title').each(function(){
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});
$('.card-title').each(function(){
  $(this).css('min-height', maxHeight + 'px');
});
jsfiddle.net/itchief/vmzt83uf/
Руслан
Руслан
Добрый день.
По умолчанию картинки в карточках растягиваются по высоте и не адаптируются в IE.
В инете нашел, что нужно прописать в стилях
.card-img-top {
flex: 0 0 auto;
}
Ну и для .card-img-bottom тоже самое, тогда все в порядке.
Может пригодиться кому-нибудь.
Лорик
Лорик
Огромное спасибо за Ваши уроки!