Отступы: классы m и p
Утилита — маленький класс, который задаёт одно CSS-свойство. Самые частые утилиты — отступы: m (margin, внешний отступ) и p (padding, внутренний). С ними почти не нужно писать свой CSS для расстояний между элементами.
Как читать класс
Класс собирается из трёх частей: свойство, сторона и размер. mt-3 — margin-top третьего размера, px-2 — padding слева и справа второго размера.
| Часть | Значения |
|---|---|
| Свойство | m — margin, p — padding |
| Сторона | t верх, b низ, s начало (слева), e конец (справа), x слева и справа, y сверху и снизу, без буквы — все стороны |
| Размер | 0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem, auto |
Буквы s и e вместо left и right нужны для языков с письмом справа налево: там Bootstrap сам меняет стороны местами.
Первый пример
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="border p-4">Внутри отступ 1.5rem</div>
<div class="border mt-3 px-5 py-1">Сверху 1rem, по бокам 3rem</div>Первый блок одинаково отступает от рамки со всех сторон. Второй отодвинут от первого на 1rem, а текст внутри прижат к рамке сверху и снизу и далеко от неё по бокам.
Центрирование и auto
mx-auto делит свободное место слева и справа поровну и ставит блок с заданной шириной по центру. ms-auto прижимает элемент к правому краю флекс-контейнера:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="border p-3 mx-auto" style="max-width: 300px">Форма входа</div>
<div class="d-flex border p-2 mt-3">
<span>Tasko</span>
<span class="ms-auto">Выйти</span>
</div>Блок формы стоит по центру, а «Выйти» уехало вправо. Класс d-flex включает флексбокс, о нём следующий урок.
Адаптивные отступы
Между буквой стороны и размером можно вставить имя точки перелома: p-2 p-md-5 — небольшой отступ на телефоне и большой от 768 пикселей. Так секции лендинга остаются просторными на ноутбуке и не теряют место на телефоне.
Промежутки gap
Для расстояния между дочерними элементами флекс- или грид-контейнера есть класс gap-* с той же шкалой:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex gap-2">
<button class="btn btn-primary">Сохранить</button>
<button class="btn btn-outline-secondary">Отмена</button>
<button class="btn btn-outline-danger">Удалить</button>
</div>Между кнопками ровно 0.5rem, и не нужно ставить отступ каждой кнопке отдельно.
Частая ошибка
Искать класс mt-6 или p-10. Шкала заканчивается на 5 (3rem), больших номеров нет, и неизвестный класс просто ничего не делает. Для большего отступа напишите свой CSS или расширьте шкалу через Sass — это показано в уроке о настройке Bootstrap через Sass.