Шпаргалка по сетке Bootstrap 5

Bootstrap 5 использует 12-колоночную адаптивную сетку на основе Flexbox. Она позволяет легко создавать макеты, которые корректно отображаются на всех устройствах — от мобильных телефонов до больших мониторов.

Основные принципы

Вся ширина контейнера делится на 12 колонок.
Колонки должны находиться внутри
.
Строки (row) должны быть внутри container или container-fluid.
Сетка использует пять брейкпоинтов (размеров экрана).

Брейкпоинты (точки останова)

Префикс класса	Название	Мин. ширина экрана	Пример
`col-`	Extra small (xs)	< 576px	`col-6`
`col-sm-`	Small (sm)	≥ 576px	`col-sm-4`
`col-md-`	Medium (md)	≥ 768px	`col-md-3`
`col-lg-`	Large (lg)	≥ 992px	`col-lg-6`
`col-xl-`	Extra large (xl)	≥ 1200px	`col-xl-2`
`col-xxl-`	Extra extra large (xxl)	≥ 1400px	`col-xxl-1`

Как это работает?

Класс col-6 означает: «занимай 6 из 12 колонок на всех экранах».
Класс col-sm-6 означает: «на экранах от 576px и шире — 6 колонок, а на меньших — 12 (полная ширина)».

Можно комбинировать:

<div class="col-12 col-md-6 col-lg-3">...</div>

Это значит:

На xs (<576px): 12 колонок (полная ширина)
На md (≥768px): 6 колонок (половина)
На lg (≥992px): 3 колонки (четверть)

Пример: 4 колонки на больших экранах, 2 на планшетах, 1 на телефонах

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3">Блок 1</div>
    <div class="col-12 col-sm-6 col-lg-3">Блок 2</div>
    <div class="col-12 col-sm-6 col-lg-3">Блок 3</div>
    <div class="col-12 col-sm-6 col-lg-3">Блок 4</div>
  </div>
</div>

Поведение:

xs (<576px): 4 строки по одному блоку
sm–md (576–991px): 2 строки по 2 блока
lg+ (≥992px): 1 строка из 4 блоков

Полезные советы

Сумма колонок в одной строке не должна превышать 12. Если превышает — лишние блоки переносятся на следующую строку.
Если не указывать число (например, col), Bootstrap автоматически распределит доступное пространство между такими блоками.
Используйте g-* (например, g-3) для задания отступов между колонками и строками.
Для центрирования: justify-content-center (по горизонтали), align-items-center (по вертикали) на row.

Когда использовать какой брейкпоинт?

xs — мобильные телефоны (все, что меньше 576px)
sm — большие телефоны и маленькие планшеты
md — планшеты в альбомной ориентации
lg — ноутбуки и маленькие мониторы
xl / xxl — большие и очень большие десктопы

Заключение

Сетка Bootstrap — мощный инструмент, который экономит часы верстки. Главное — понимать логику брейкпоинтов и помнить: меньше — значит «на всех экранах до этого размера».

Сохраните эту шпаргалку — и вы больше не будете гуглить «как сделать две колонки на телефоне в Bootstrap» 😉

Категории