Отступы

Scale

Число — это шаг шкалы, а не произвольный пиксель

Доступны значения от 0 до 25 с шагом 4 px: 0, 4, 8, 12 … 100 px. Используйте класс вместо локального margin или padding.

Gap

Расстояние между соседями задаётся на контейнере

• .gap-0…25Одинаковый интервал по обеим осям.
• .gap-x-0…25Интервал между колонками.
• .gap-y-0…25Интервал между строками.

Padding

Внутренний отступ задаётся общей, осевой или сторонней утилитой

• .p-*Все стороны.
• .px-* / .py-*Горизонтальная или вертикальная ось.
• .ps-* / .pe-*Логическое начало или конец строки; предпочтительны для интерфейсов с разным направлением текста.
• .pt-* / .pr-* / .pb-* / .pl-*Физическая сторона.

Margin

Внешний отступ повторяет тот же словарь

m, mx, my, ms, me, mt, mr, mb, ml работают со значениями 0…25. Для margin также доступно специальное значение auto: например ms-auto или mx-auto.

<div class="d-flex items-center gap-3 px-4 py-3 mt-4 mt-lg-6">
  <span>Содержимое</span>
  <button class="ms-auto">Действие</button>
</div>

Responsive

Breakpoint меняет значение mobile-first

Каждая группа поддерживает sm, md, lg, xl, xxl: p-3 p-md-5, gap-2 gap-lg-4, mt-auto mt-md-0.

Важно: двоеточечный синтаксис вроде md:mt-4 не поддерживается.