Центрирование карточек Bootstrap 4 на странице: способы

Быстрый ответ

Для центрирования карточек в Bootstrap 4 используйте классы .row и .justify-content-center. Поместите колонки с карточками внутри элемента с классом .container для достижения нужного выравнивания:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4"> <!-- Карточка 1 --> </div>
    <div class="col-md-4"> <!-- Карточка 2 --> </div>
  </div>
</div>

Ваши карточки будут центрированы с учётом особенностей различных устройств.

Подробное объяснение

В Bootstrap центрирование контента реализуется благодаря возможностям флексбокса и системе сеток. Рассмотрим несколько вариантов.

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

Для центрирования одной карточки применяйте класс .mx-auto совместно с заданием ширины.

<div class="container">
  <div class="card mx-auto" style="width: 18rem;"> <!-- Содержимое одной карточки --> </div>
</div>

Использование класса .mx-auto обеспечивает автоматическое создание горизонтальных внешних отступов и центрирование карточки.

Подробнее об этом расскажет наш спикер на видео

Центрирование нескольких карточек

Для центрирования группы карточек используйте классы .row и .mx-auto.

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 mx-auto"> <!-- Карточка 1 --> </div>
    <div class="col-md-4 mx-auto"> <!-- Карточка 2 --> </div>
  </div>
</div>

.mx-auto в колонках центрирует расположение карточек.

Вертикальное центрирование

Для вертикального центрирования на всю высоту экрана используйте классы .vh-100 и .d-flex align-items-center.

<div class="container d-flex align-items-center" style="min-height: 100vh;">
  <div class="row w-100 justify-content-center">
    <div class="col-md-4"> <!-- Содержимое карточки --> </div>
  </div>
</div>

Установка минимальной высоты, равной высоте экрана, позволяет центрировать содержимое по вертикали.

Смещение с помощью классов offset

Иногда требуется незначительное смещение, которое можно осуществить при помощи классов .offset-*.

<div class="row justify-content-center">
  <div class="col-md-4 offset-md-1"> <!-- Карточка 1 --> </div>
  <div class="col-md-4"> <!-- Карточка 2 --> </div>
</div>

Пользуйтесь классами .offset-* аккуратно, чтобы не нарушить адаптивность.

Визуализация

Центрирование карточек в Bootstrap схоже с парковкой автомобиля:

**До центрирования:**
Парковка: 🅿️🚗....
Свободные места по обе стороны.

**После центрирования:**
Парковка: ....🚗....
Автомобиль точно в центре.

/* Пример использования классов Bootstrap */
.centered-parking-lot .car {
  display: flex;
  justify-content: center;
}

Воспринимайте центрирование карточек как поиск идеального места для парковки авто.

Погружение в детали разработки

Установка ширины для .mx-auto

Укажите ширину для .mx-auto, чтобы контролировать размеры контейнера.

<div class="card mx-auto" style="width: 18rem;"> <!-- Содержимое --> </div>

Размещение карточек с отступами

Воспользуйтесь классом .mb-* для добавления пространства между карточками.

<div class="card mb-3 mx-auto" style="width: 18rem;"> <!-- Содержимое --> </div>

Центрирование содержимого в карточках

Для центрирования текста или других элементов внутри карточек применяйте .text-center.

<div class="card mx-auto text-center" style="width: 18rem;"> <!-- Центрированный текст --> </div>

Использование циклов для динамического контента

Применяйте классы .row и .col-* для динамического создания карточек в циклах.

<div class="row justify-content-center">
  {% for card in cards %}
    <div class="col-md-4 mx-auto mb-3"> <!-- Динамическое содержимое --> </div>
  {% endfor %}
</div>

Создание доступных карточек

Доступность важна. Сделайте карточки удобными для управления с клавиатуры и читаемыми для экранных чталок.

Полезные материалы

1. Система сеток · Bootstrap — подробно о использовании сетки в Bootstrap 4.
2. Отступы · Bootstrap — классы отступов в Bootstrap 4.
3. Полное руководство по Flexbox | CSS-Tricks — для глубокого понимания Flexbox.
4. Основные концепции flexbox – CSS | MDN — введение в теорию Flexbox от Mozilla.
5. Bootstrap 4 Cards — обзор карточек в Bootstrap 4.
6. Как центрировать что угодно с CSS – элементы, текст и другое — различные способы центрирования в CSS.