Брейкпоинты Bootstrap 5 и адаптивная сетка: полное объяснение

В Bootstrap 5 шесть адаптивных уровней: extra small (меньше 576 px), sm (от 576 px), md (от 768 px), lg (от 992 px), xl (от 1200 px) и xxl (от 1400 px). Эти имена используются во всех адаптивных классах: col-md-6 значит «половина ширины начиная с 768 px», а d-lg-none значит «скрыто начиная с 992 px». Как и Tailwind, Bootstrap построен по принципу mobile first: классы без брейкпоинта действуют на всех размерах, а классы с брейкпоинтом включаются от указанной ширины и выше.

Брейкпоинты Bootstrap 5 и ширина контейнеров

Это значения по умолчанию из документации Bootstrap по брейкпоинтам. .container-fluid всегда растянут на всю ширину, а .container-md (и варианты с другими инфиксами) занимает всю ширину до своего брейкпоинта, после чего получает фиксированную ширину.

Адаптивная сетка на практике

Сетка Bootstrap состоит из 12 колонок. Для каждого брейкпоинта вы указываете, сколько колонок занимает элемент:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

Получается одна карточка в ряд на телефонах, две от 768 px и три от 992 px. col-12 можно не писать, потому что колонка без размера внутри row и так растягивается, но с ним намерение читается яснее.

Для сеток из одинаковых элементов короче использовать row columns:

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

Порядок блоков на конкретном брейкпоинте меняют классы order, например order-first order-md-0. Это удобно, когда на телефоне картинка должна идти после заголовка, а на десктопе стоять рядом с ним.

Адаптивные утилиты, которые нужны постоянно

• Отображение: d-none d-md-block скрывает блок на телефонах и показывает с 768 px; d-lg-none скрывает с 992 px.
• Направление flex: flex-column flex-md-row выстраивает элементы столбиком на телефонах и в ряд начиная с md.
• Отступы: p-3 p-lg-5 даёт меньшие внутренние отступы на маленьких экранах.
• Выравнивание текста: text-center text-md-start.
• Навбар: navbar-expand-lg показывает полное меню от 992 px, а ниже кнопку-бургер.
• Таблицы: оборачивайте широкие таблицы в .table-responsive, чтобы они прокручивались внутри своего блока.
• Изображения: .img-fluid задаёт max-width: 100% и height: auto.

Миксины медиазапросов в Sass

Если вы собираете Bootstrap из Sass, используйте его миксины, а не захардкоженные пиксели:

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* меньше 768px */ }
@include media-breakpoint-between(md, xl) { /* от 768px до 1199.98px */ }
@include media-breakpoint-only(md) { /* от 768px до 991.98px */ }

Обратите внимание, что в Bootstrap 5 media-breakpoint-down(md) означает ширину меньше брейкпоинта md и компилируется в max-width: 767.98px. Дробь .98 нужна, чтобы не было пересечений при дробной ширине на экранах с высокой плотностью пикселей. В Bootstrap 4 тот же миксин брал следующий брейкпоинт, и при обновлении на этом многие спотыкаются.

Как изменить брейкпоинты Bootstrap

Переопределите Sass-карты до импорта Bootstrap:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

Ключи должны идти по возрастанию, а xs: 0 нужно оставить. Стоит ли вообще их менять? Только если у дизайна есть на то реальная причина. Как выбирать ширины исходя из контента, а не из списка устройств, объясняется в статье о брейкпоинтах для адаптивной вёрстки.

Частые ошибки адаптивной вёрстки на Bootstrap

• col-6 на телефонах. Две колонки на экране шириной 360 px дают примерно по 160 px на колонку после отступов, и текст с кнопками туда почти никогда не помещается.
• Забытый брейкпоинт навбара. Навбар с большим количеством пунктов и navbar-expand-md может не помещаться в диапазоне от 768 до 992 px.
• Скрытие контента через d-none на мобильных вместо перестановки. Google индексирует именно мобильную версию страницы.
• Собственные медиазапросы с другими значениями, чем у Bootstrap: компоненты перестраиваются на 768 px, а ваш CSS на 760 px.

Как проверить вёрстку на Bootstrap

Проверьте каждый уровень точно на его ширине и на 1 px меньше: 575/576, 767/768, 991/992, 1199/1200 и 1399/1400. В Chrome DevTools в панели устройств есть опция Show media queries, которая показывает брейкпоинты полосами, по которым можно кликать.

Затем посмотрите страницу на конкретных моделях телефонов с их user agent и плотностью пикселей. Mobile View Extension делает это одной кнопкой. Весь процесс описан в статье как проверить адаптивность сайта.

Частые вопросы

Какие брейкпоинты в Bootstrap 5?

576 px (sm), 768 px (md), 992 px (lg), 1200 px (xl) и 1400 px (xxl), плюс безымянный уровень extra small меньше 576 px.

Что означает col-md-6 в Bootstrap?

Элемент занимает 6 из 12 колонок, то есть половину ряда, начиная с брейкпоинта md (768 px). Ниже 768 px он растягивается на всю ширину, если другой класс не говорит иначе.

Bootstrap работает по принципу mobile first?

Да. Классы без брейкпоинта действуют на всех экранах, а классы с брейкпоинтом переопределяют их начиная с указанной ширины.