Промежутки между колонками
Gutter (промежуток) — расстояние между колонками сетки. По умолчанию оно равно 1.5rem по горизонтали и 0 по вертикали. Классы g-* на строке меняют этот промежуток, чтобы карточки не слипались или, наоборот, стояли вплотную.
Как увидеть промежуток
Промежуток создаётся внутренними отступами колонок. Поэтому фон и рамку дают не самой колонке, а блоку внутри неё:
<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"><div class="border bg-light p-3">Задачи</div></div>
<div class="col"><div class="border bg-light p-3">Проекты</div></div>
</div>
</div>Между блоками видна полоса шириной 1.5rem — это стандартный промежуток.
Классы g, gx и gy
| Класс | Что меняет |
|---|---|
g-0 … g-5 | Промежуток в обе стороны |
gx-0 … gx-5 | Только по горизонтали |
gy-0 … gy-5 | Только по вертикали |
Цифры — шаги шкалы отступов Bootstrap: 0, 0.25rem, 0.5rem, 1rem, 1.5rem и 3rem.
Сетка карточек
Вертикальный промежуток важен, когда колонки переносятся на новые строки. Вот плитка возможностей для лендинга:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row row-cols-2 g-4">
<div class="col"><div class="border bg-light p-3">Списки задач</div></div>
<div class="col"><div class="border bg-light p-3">Дедлайны</div></div>
<div class="col"><div class="border bg-light p-3">Комментарии</div></div>
<div class="col"><div class="border bg-light p-3">Отчёты</div></div>
</div>
</div>Класс g-4 даёт одинаковый промежуток 1.5rem и между колонками, и между строками. Уберите его — нижний ряд прилипнет к верхнему.
Без промежутков
Класс g-0 убирает промежутки совсем — так ставят вплотную, например, картинку и текст:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row g-0 border">
<div class="col-4 bg-primary text-white p-3">Tasko</div>
<div class="col-8 p-3">Планируйте задачи всей командой.</div>
</div>
</div>Синий блок и текст соприкасаются без зазора.
Частая ошибка
Красить фон самой колонки и удивляться, что промежутка нет. Промежуток — это внутренний отступ колонки, а фон заливает и его, так что колонки выглядят слитыми. Кладите оформленный блок (позже — карточку) внутрь колонки, а колонку оставляйте только для раскладки.