Утилиты для макета

Для более быстрой мобильной и гибкой разработки Bootstrap включает в себя десятки полезных классов для отображения, скрытия, выравнивания и размещения содержимого.

Изменение параметра display

Используйте Отображение элементов для быстрого переключения общих значений свойства отображения display. Пользуйтесь этим свойством при использовании нашей сеточной системы и компонентов, чтобы показать или скрыть их на разных зонах видимости.

Параметры Flexbox

Bootstrap 4 построен с использованием flexbox, но не каждый элемент display был изменен на display: flex, так как это добавило бы много ненужных переопределений и неожиданно изменило бы поведение основных браузеров. Большинство наших компонентов построены с включенным flexbox.

Если Вам нужно добавить к элементу display: flex, сделайте это с помощью .d-flex или одного из адаптивных вариантов (например, .d-sm-flex). Вам понадобится этот класс или значение display, чтобы разрешить использование наших дополнительных утилит флексбокс для определения размеров, выравнивания, интервалов и т.д.

Поля и отступы

Используйте margin и padding утилиты интервалов, чтобы управлять расположением и размером элементов и компонентов. Bootstrap 4 включает пятиуровневую шкалу для интервалов между утилитами, основанную на переменной $spacer по умолчанию со значением 1rem. Выберите значения для всех окон просмотра (например, .mr-3 для margin-right: 1rem), или выберите адаптивные варианты для нацеливания на определенные области просмотра (например, .mr-md-3 для margin-right: 1rem начиная с контрольной точки md).

Переключение видимости visibility

Когда переключение видимости display не требуется, Вы можете переключать visibility элемента с помощью наших утилит видимости. Невидимые элементы по-прежнему будут влиять на макет страницы, но визуально скрыты от посетителей.