Контейнер, строки и колонки

Сетка Bootstrap раскладывает содержимое страницы по колонкам. Она собирается из трёх классов: контейнер ограничивает ширину страницы, строка (row) объединяет колонки, колонка (col) держит содержимое. Внутри работает флексбокс, который вы знаете по учебнику, но писать его вручную не нужно.

Контейнер

Класс container задаёт максимальную ширину содержимого и центрирует его. Ширина растёт ступенями вместе с экраном: 540, 720, 960, 1140 и 1320 пикселей. Класс container-fluid растягивает блок на всю ширину.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container bg-light border py-3">Обычный контейнер</div>
<div class="container-fluid bg-light border py-3 mt-2">Контейнер на всю ширину</div>

В узком превью оба блока почти одинаковы; откройте пример в широком окне — первый остановится на фиксированной ширине. Классы bg-light, border, py-3 и mt-2 здесь и дальше только подсвечивают блоки, их разберём в разделе об утилитах.

Строка и колонки

Колонки кладут в строку row, а строку — в контейнер. Колонки с классом col делят ширину поровну:

<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 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>

Три колонки стоят в ряд, каждая занимает треть строки. Добавьте четвёртую — все станут по четверти.

Двенадцать частей

Строка делится на 12 равных частей. Класс col-4 занимает 4 части из 12, то есть треть, col-8 — две трети:

<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-8 border bg-light py-2">Список задач</div>
    <div class="col-4 border bg-light py-2">Фильтры</div>
  </div>
  <div class="row">
    <div class="col-3 border bg-light py-2">Меню</div>
    <div class="col border bg-light py-2">Остаток строки</div>
  </div>
</div>

Во второй строке col-3 берёт четверть, а col без числа забирает всё, что осталось. Класс col-auto сделал бы колонку шириной по содержимому.

Если сумма частей больше 12, лишние колонки переносятся на новую строку.

Колонки внутри колонок

Сетку можно вкладывать: внутри колонки создают новую строку row, и она снова делится на 12 частей ширины этой колонки. Так, например, внутри основной колонки админ-панели размещают ряд карточек со статистикой.

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

Ставить колонки прямо в контейнер, без row, или класть содержимое прямо в row. У строки отрицательные боковые отступы, а у колонок — внутренние, и вместе они дают ровные края. Без этой пары колонки не встанут в ряд или съедут вбок. Порядок всегда один: container, внутри row, внутри колонки, внутри содержимое.