Адаптивность и точки перелома

Точка перелома (breakpoint) — ширина экрана, с которой раскладка страницы меняется. На телефоне карточки удобнее ставить друг под другом, на ноутбуке — в ряд. Bootstrap задаёт шесть точек и добавляет их имена в классы колонок, поэтому медиазапросы из учебника писать не приходится.

Шесть размеров

У самого маленького размера нет имени в классе: col-6 действует на любом экране.

Правило «от и шире»

Класс с именем точки работает от этой ширины и на всех больших экранах. До неё колонка занимает всю строку:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col-md-6 border bg-light py-2">Бесплатный тариф</div>
    <div class="col-md-6 border bg-light py-2">Командный тариф</div>
  </div>
</div>

На экране от 768 пикселей тарифы стоят в два столбца, на более узком — друг под другом. Меняйте ширину окна браузера, чтобы увидеть переключение. Такой подход называют mobile first: сначала раскладка для телефона, потом добавки для экранов побольше.

Несколько размеров сразу

Классы для разных точек можно сочетать на одном элементе. Каждый следующий перекрывает предыдущий на своей ширине:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Пользователи</div>
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Выручка</div>
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Задачи</div>
    <div class="col-12 col-sm-6 col-lg-3 border bg-light py-2">Отзывы</div>
  </div>
</div>

Это ряд статистики админ-панели: на телефоне по одному блоку в строке, на планшете по два, на широком экране все четыре в ряд.

Число колонок на строке

Когда все колонки одинаковые, удобнее задать их количество на самой строке классом row-cols-*:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4">
    <div class="col border bg-light py-2">Пользователи</div>
    <div class="col border bg-light py-2">Выручка</div>
    <div class="col border bg-light py-2">Задачи</div>
    <div class="col border bg-light py-2">Отзывы</div>
  </div>
</div>

Результат тот же, но у колонок остался один короткий класс col.

Адаптивный контейнер

У контейнера тоже есть варианты с точками: container-md занимает всю ширину до 768 пикселей, а дальше ведёт себя как обычный container.

Частая ошибка

Ожидать, что col-md-6 действует только на средних экранах. Класс работает «от md и шире», поэтому на большом мониторе колонка тоже будет половиной. Если на большом экране нужна другая ширина, добавьте ещё один класс, например col-md-6 col-xl-4.