Bootstrap Отступы

Bootstrap 5 Горизонтальные и вертикальные отступы - Gutters — Полная таблица
Tags:
Categories:

Bootstrap 5: Горизонтальные и вертикальные отступы (Gutters) — Полная таблица

Bootstrap 5 предоставляет удобные классы для управления отступами между блоками (margin и padding).
Вот полная таблица с примерами для горизонтальных и вертикальных отступов.

1. Классы для отступов (Spacing Utilities)

Bootstrap использует систему {property}{sides}-{size}, где:

  • property:
    • m — margin (внешний отступ).
    • p — padding (внутренний отступ).
  • sides:
    • t — top (верх).
    • b — bottom (низ).
    • s — start (лево для LTR, право для RTL).
    • e — end (право для LTR, лево для RTL).
    • x — горизонтальные (левый + правый).
    • y — вертикальные (верхний + нижний).
    • (пусто) — все стороны.
  • size:
    • 0 — 0px.
    • 1 — 0.25rem (4px).
    • 2 — 0.5rem (8px).
    • 3 — 1rem (16px).
    • 4 — 1.5rem (24px).
    • 5 — 3rem (48px).
    • auto — автоматический отступ.

2. Горизонтальные отступы (между колонками и блоками)

Класс Описание Пример
.gap-1 – .gap-5 Отступ между flex-элементами (margin) <div class="d-flex gap-3">
.gx-1 – .gx-5 Горизонтальный padding (левый + правый) <div class="row gx-3">
.mx-1 – .mx-5 Горизонтальный margin (левый + правый) <div class="mx-auto">
.ms-1 – .ms-5 Отступ слева (margin-start) <div class="ms-3">
.me-1 – .me-5 Отступ справа (margin-end) <div class="me-2">
.px-1 – .px-5 Горизонтальный padding (левый + правый) <div class="px-4">

Пример:

<div class="d-flex gap-3">  <!-- Отступы между flex-элементами -->
  <div>Блок 1</div>
  <div>Блок 2</div>
</div>

<div class="row gx-4">  <!-- Горизонтальные отступы в гриде -->
  <div class="col">Колонка 1</div>
  <div class="col">Колонка 2</div>
</div>

3. Вертикальные отступы (между строками и блоками)

Класс Описание Пример
.gy-1 – .gy-5 Вертикальный padding (верх + низ) <div class="row gy-3">
.my-1 – .my-5 Вертикальный margin (верх + низ) <div class="my-4">
.mt-1 – .mt-5 Отступ сверху (margin-top) <div class="mt-2">
.mb-1 – .mb-5 Отступ снизу (margin-bottom) <div class="mb-3">
.py-1 – .py-5 Вертикальный padding (верх + низ) <div class="py-5">

Пример:

<div class="row gy-4">  <!-- Вертикальные отступы в гриде -->
  <div class="col-12">Строка 1</div>
  <div class="col-12">Строка 2</div>
</div>

<div class="my-5">  <!-- Большой вертикальный margin -->
  <p>Контент с отступами сверху и снизу</p>
</div>

4. Автоматические и специальные отступы

Класс Описание Пример
.m-auto Автоматический margin (центрирование) <div class="mx-auto">
.p-auto Автоматический padding (редко используется) <div class="p-auto">
.m-n1 – m-n5 Отрицательный margin <div class="m-n3">

Пример:

<div class="mx-auto" style="width: 200px;">  <!-- Центрирование -->
  Этот блок будет по центру
</div>

5. Адаптивные отступы

Все классы поддерживают адаптивность через breakpoints:

  • sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px).

Пример:

<div class="mx-3 mx-md-5">  <!-- На мобильных mx-3, на десктопе mx-5 -->
  Адаптивный отступ
</div>

Итог

✅ Горизонтальные отступы → .gap-*, .gx-*, .mx-*, .ms-*, .me-*.
✅ Вертикальные отступы → .gy-*, .my-*, .mt-*, .mb-*.
✅ Центрирование → .mx-auto.
✅ Адаптивность → .mx-sm-3, .gy-lg-4.

Совет: Для сеток (row/col) лучше использовать .gx-* и .gy-*, а для flex-контейнеров — .gap-*.