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

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

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

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

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

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

Класс 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» 😉

Категории:

Категории

• Главная
• 1С
• 2040
• AD
• CG
• IOT умный дом
• Joomla
• Linux
• macOS
• mysql
• php
• SEO
• Windows
• Безопасность
• Железо
• Защита данных
• Простотак
• Сети LAN
• Создание сайтов
• Электрика
• Электроника