Одним из ключевых механизмов Bootstrap является сетка (Grid) – система на основе Flexbox, позволяющая легко строить адаптивные раскладки. Сетка разбивает страницу на 12 колонок по горизонтали и адаптируется под шесть основных «точек перелома» (размеров экранов) – от самых маленьких до очень больших.

Эти точки перелома соответствуют классам sm, md, lg, xl, xxl (и базовому без приставки для мобильных устройств). Именно через них задается, при каких ширинах экрана макет меняет колоночность или выравнивание.

Bootstrap использует три вида контейнеров:

• .container – фиксированная по ширине область с адаптивной максимальной шириной (зависит от брейкпоинта).
• .container-fluid – тянется на всю ширину экрана.
• .container-{breakpoint} (например, .container-md) – комбинированный вариант: адаптивная (незаключенная) до указанной ширины, а после – фиксированная.

Внутри контейнера размещаются строки, которые оборачивают группы колонок. Каждая колонка создается с классом .col или с указанием ширины, например .col-4 (4/12 ширины) или .col-lg-6 (6/12, начиная с брейкпоинта lg и выше).

Например, следующий код создаёт трёхколоночную строку, где каждая колонка равной ширины (по 4 части из 12):

<div class="container">
  <div class="row">
    <div class="col">Колонка 1</div>
    <div class="col">Колонка 2</div>
    <div class="col">Колонка 3</div>
  </div>
</div>

В примере выше Bootstrap автоматически распределит три колонки равномерно. Если экран станет уже, колонки будут поочерёдно сдвигаться вертикально. Приставка col без брейкпоинта означает, что поведение применяется на всех размерах экрана.

При желании вы можете задать разные поведения. Например, классы .col-md-6 .col-sm-12 сделают две колонки на экранах от md и одну колонку (в два ряда) на малых (sm) и меньше.

В сетке Bootstrap используется Flexbox, поэтому элементы автоматически выравниваются и адаптируются.

Горизонтальные промежутки (гаппинг) между колонками называются «gutters» и задаются внутренним отступом (padding) у колонок, который компенсируется отрицательными полями у родительской строки.

Стандартные брейкпоинты Bootstrap 5.3

Минимальные ширины колонок соответствуют этим брейкпоинтам: например, класс .col-lg-4 задаст ширину 4/12 колонки (то есть одну треть) при ширине экрана от 992px и выше. При узких экранах (меньше 576px) без указания брейкпоинта .col ведёт себя как .col-12 — колонки становятся один под другим.

Ключевые моменты системы сетки:

• Используйте обёртку .container или .container-fluid для создания ограниченного или на всю ширину макета.
• Внутри контейнера добавляйте строки и колонки: .row и блоки с классами .col, .col-{size}-{n}.
• Без префикса размера экрана класс действует на всех экранах.
• Используйте брейкпоинты: .col-sm-*, .col-md-* и так далее — они влияют от указанного размера экрана и выше.
• Опционально можно добавлять: .g-* — управление отступами между колонками (гуттерами). justify-content-center и другие утилиты выравнивания для строк.

Пример кода с сеткой:

<div class="container">
  <div class="row">
    <div class="col-md-6">Колонка 1 (6 из 12 на md+)</div>
    <div class="col-md-6">Колонка 2 (6 из 12 на md+)</div>
  </div>
  <div class="row">
    <div class="col-sm-4">Колонка A</div>
    <div class="col-sm-4">Колонка B</div>
    <div class="col-sm-4">Колонка C</div>
  </div>
</div>

В этом примере в первой строке две равные колонки, которые занимают по 6/12 при md и более широких экранах; во второй строке — три колонки по 4/12 (то есть по третьей части) при sm+, а на экранах меньше 576px они выстроятся в один столбец.