Классы Bootstrap 4 для управления отступами

В 4-й версии Bootstrap разработчики решили создать ряд классов, которые позволяют увеличивать внутренний (padding) и внешний (margin) отступ для блочных (display: block) или строчно-блочных элементов (display: inline-block).

Эти классы получили название “утилит расстояния” (Spacing utilities) и позволяют изменять отступы в пределах от .25rem до 3rem. Классы для управления отступами позволяют назначить их как по вертикальным, так и по горизонтальным сторонам. Их названия тесно связаны с соответствующими css-свойствами, а именно начинаются с буквы:

• m – для классов, устанавливающих margin
• p – для классов, устанавливающих padding

Также можно управлять сторонами, к которым будет применен отступ:

• 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
• без буквы –  для классов, устанавливающих margin или padding для всех 4-х сторон элемента

Значение величин отступов:

• 0 – для классов, которые убирают margin или padding,  устанавливая их значение в 0
• 1 – (по умолчанию) для классов, устанавливающих margin или padding в значение, равное $spacer * .25
• 2 – (по умолчанию) для классов, устанавливающих margin или padding в значение, равное $spacer * .5
• 3 – (по умолчанию) для классов, устанавливающих margin или padding в значение, равное $spacer
• 4 – (по умолчанию) для классов, устанавливающих margin или padding в значение, равное $spacer * 1.5
• 5 – (по умолчанию) для классов, устанавливающих margin или padding в значение, равное $spacer * 3
• auto – для классов, устанавливающих margin в значение auto

По умолчанию, переменная $spacer имеет значение 1rem. Т.е. значения величин отступов меняются от 0.25rem до 3rem с шагом, который увеличивает предыдущее значение вдвое. Подразумевается, что используется стандартный шрифт размером в 16px. Соответственно, отступы имеют значения от 4px до 48px.

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

Следует отметить, что классы отступов предполагают еще указание классов адаптивной сетки (-md-, -sm-, -lg-, -xl-) для того, чтобы отступы в элементах существовали только для определенных разрешений экранов. Например, необходимо добавить отступ снизу только для экранов смартфонов, но убрать его на всех остальных разрешениях экранов:

Если нужно добавить внутренний отступ на небольших экранах, можно использовать такой код:

Правило использования названий классов здесь такое:  формат {property}{sides}-{size} для смартфонов (xs) и {property}{sides}-{breakpoint}-{size} для других разрешений ( sm, md, lg и xl).

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

Также в Bootstrap 4 существует класс .mx-auto для горизонтального выравнивания блочных элементов с установленной для них фиксированной шириной. Это значит, что для элемента должны быть записаны такие css-свойства:display: block и width, а уже класс добавит горизонтальные margin со значением auto.

Пример использования классов для внутренних отступов

Внутренний отступ – это padding, поэтому все классы начинаются с английской буквы p.

See the Pen Bootstrap 4 Padding Classes by Elen (@ambassador) on CodePen.18892

Пример использования классов для внешних отступов

Внутренний отступ – это margin, поэтому все классы начинаются с английской буквы m. в нижней части примера размещены классы, в которых одна или 2 стороны имеют  margin: auto.

See the Pen Bootstrap 4 Margin Classes by Elen (@ambassador) on CodePen.18892

Ссылка на документацию Bootstrap 4.

Возможно, вам еще будут интересны утилиты Bootstrap для скрытия/отображения элементов на разных экранах.