Отступы

Используйте внутренние padding или внешние margin отступы с помощью модификаторов.

Обозначения

Модификаторы отступов, которые применяются ко всем контрольным точкам, от xs до xl, не имеют параметра контрольной точки. Например, модификатор m-1 задает внешний отступ 1-го уровня для любого разрешения экрана. Для модификаторов, которые действют только от определенного размера экрана дополнительно указывается параметр контрольной точки. Например m-md-1 задает внешний отступ 1-го уровня для контрольных точек от md до xl.

Имена классов присваиваются с использованием формата {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg, и xl.

Где property является одним из:

  • m - для классов, которые задают margin
  • p - для классов, которые задают padding

Где sides является одним из:

  • t - для классов, которые задают margin-top или padding-top
  • b - для классов, которые задают margin-bottom или padding-bottom
  • l - для классов, которые задают margin-left или padding-left
  • r - для классов, которые задают margin-right или padding-right
  • x - для классов, которые задают *-left и *-right
  • y - для классов, которые задают *-top и *-bottom
  • blank - для классов, которые задают margin или padding на всех 4 сторонах элемента

Где size является одним из:

  • 0 - для классов, которые устраняют margin или padding, установив его 0
  • 1 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * .25 или $spacer-y * .25
  • 2 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * .5 или $spacer-y * .5
  • 3 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x или $spacer-y
  • 4 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 2 или $spacer-y * 2
  • 5 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 4 или $spacer-y * 4
  • 6 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 8 или $spacer-y * 8
  • 7 - (по умолчанию) для классов, которые задают margin или padding в $spacer-x * 16 или $spacer-y * 16

(Вы можете добавить больше размеров путем добавления записей в $spacers переменной Sass map)

Примеры

Вот некоторые примеры этих классов:

Margin left 2
Margin 4
Padding left 5
Padding 3
Padding bottom 3
Padding top 2

    <div  class="sf-example">
      <p class="mt-0">Margin top 1</p>
      <p class="ml-1">Margin left 1</p>
      <p class="m-4">Margin 4</p>
      <p class="px-2">Padding right 2</p>
      <p class="p-3">Padding 3</p>
      <p class="pb-3">Padding bottom 3</p>
      <p class="pt-2">Padding top 2</p>
    </div>

Горизонтальное центрирование

Кроме того, Bootstrap также включает класс .mx-auto для горизонтального центрирования содержимого уровня блока фиксированной ширины, то есть контента, который имеет display: block и установленную width — установив горизонтальные поля в auto.

Центрирование элемента 
<div class="mx-auto" style="width: 200px;">
    Центрирование элемента
</div>