Выравнивание, сдвиг и порядок колонок

Строка Bootstrap — флекс-контейнер, поэтому колонки можно выравнивать и переставлять, не трогая CSS. Для этого есть три группы классов: выравнивание, сдвиг (offset — пустое место перед колонкой) и порядок (order).

Выравнивание по вертикали

Класс align-items-* на строке выравнивает все колонки по высоте: start — по верху, center — по центру, end — по низу.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row align-items-center border" style="min-height: 120px">
    <div class="col border bg-light py-2">Логотип</div>
    <div class="col border bg-light py-2">Меню</div>
  </div>
</div>

Строка выше своих колонок, и они стоят по её центру. Отдельную колонку выравнивают классом align-self-* на ней самой. Стиль min-height нужен только для того, чтобы было видно свободное место.

Выравнивание по горизонтали

Когда колонки не заполняют строку целиком, оставшееся место распределяет класс justify-content-*:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row justify-content-center">
    <div class="col-6 border bg-light py-2">Форма входа по центру</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4 border bg-light py-2">Слева</div>
    <div class="col-4 border bg-light py-2">Справа</div>
  </div>
</div>

Первая строка ставит колонку посередине, вторая разводит колонки к краям. Доступны значения start, center, end, between, around и evenly.

Сдвиг

Класс offset-* оставляет перед колонкой пустое место заданной ширины, тоже из 12 частей:

<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-md-8 offset-md-2 border bg-light py-2">Текст статьи шириной 8 из 12</div>
  </div>
</div>

От 768 пикселей перед колонкой две пустые части — она оказывается по центру. Ещё один способ прижать колонку вправо — класс ms-auto: автоматический левый отступ забирает всё свободное место.

Порядок

Классы order-* меняют порядок колонок на экране, не меняя HTML. Есть order-first, order-last и числа от 0 до 5:

<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-md-8 border bg-light py-2">Таблица заказов</div>
    <div class="col-md-4 order-first order-md-last border bg-light py-2">Фильтры</div>
  </div>
</div>

На телефоне фильтры стоят над таблицей, а от 768 пикселей возвращаются вправо. Как и у колонок, имя точки в классе означает «от этой ширины».

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

Переставлять классами order-* важное содержимое. Порядок меняется только на экране: программа чтения с экрана и клавиша Tab идут по порядку в HTML. Если меню визуально стоит первым, а в коде последним, пользователь с клавиатурой попадёт в него в самом конце. Пишите HTML в логичном порядке, а order-* используйте для второстепенных блоков.