Утилиты

Bootstrap включает в себя десятки классов-утилит для сокращения использования повторяющихся стилей.

Расстояния

Назначьте удобные для ответа значения margin или padding элементу или подмножеству его сторон со стенографическими классами. Включает поддержку отдельных свойств, всех свойств и свойств по вертикали и горизонтали. Классы построены из карты по умолчанию Sass от .25rem до 3rem.

Обозначения

Утилиты расстояния, которые применяются ко всем точкам останова, от xs до xl, не имеют аббревиатуры останова в них. Это происходит потому, что эти классы применяются от min-width: 0 и выше и, следовательно, не связаны медиа-запросом. Остальные точки останова, однако, включают аббревиатуру точки останова.

Имена классов присваиваются с использованием формата {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 * 1.5 или $spacer-y * 1.5
5 - для классов, которые задают margin или padding в $spacer-x * 3 или $spacer-y * 3

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

Примеры

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

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer-x * .25) !important;
}

.px-2 {
  padding-left: ($spacer-x * .5) !important;
  padding-right: ($spacer-x * .5) !important;
}

.p-3 {
  padding: $spacer-y $spacer-x !important;
}

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

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

Centered element

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>