Утиліти для верстки

Для швидшої розробки, зручної для мобільних пристроїв, Bootstrap містить десятки службових класів для показу, приховування, вирівнювання та розміщення вмісту.

Змінаdisplay

Використовуйте наші утиліти відображення для швидкого перемикання загальних значень displayвластивості. Змішайте його з нашою системою сіток, вмістом або компонентами, щоб відобразити або приховати їх у певних вікнах перегляду.

Параметри Flexbox

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

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

Поля та відступи

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

Перемикачvisibility

Якщо перемикання displayне потрібне, ви можете перемкнути visibilityелемент за допомогою наших утиліт видимості . Невидимі елементи все одно впливатимуть на макет сторінки, але візуально приховані від відвідувачів.