Управління відображенням елементів

У Bootstrap 4 є категорія класів, за допомогою яких можна не тільки адаптивно приховувати елементи, але і управляти тим як вони повинні бути показані на сторінці.

• d-none - приховування елемента на сторінці

• d-inline - представляє елемент рядковим

• d-inline-block - представляє елемент блочним

• d-block- представляє елемент рядково-блочним

• d-table - представляє елемент таблицею

• d-table-cell- представляє елемент осередком таблиці

• d-flex - представляє елемент блочним флекс-контейнером

• d-inline-flex - представляє елемент рядковим флекс-контейнером

Синтаксис display-класу Bootstrap 4: 

d {-breakpoint} -?

 В даному класі потрібно замість:

•  breakpoint вказати назву контрольної точки (sm, md, lg, xl), починаючи з якої буде застосовуватися вказане CSS властивість display до HTML елементу (без позначення - починаючи з самих крихітних пристроїв). 

• ? задати одне зі значень: none, inline, inline-block, block, table, table-cell, flex, inline-flex.

Для показу елемента тільки на певному інвервалі розмірів екрану можна поєднувати один клас .d - * - none з класом .d - * - *, наприклад .d-none .d-md-block .d-xl-none приховає елемент на всіх розмірах екрану, крім середніх і великих.

<div class="d-lg-none">Приховано на екранах ширше lg</div>
<div class="d-none d-lg-block">Приховано на екранах менше lg</div>

Приклади роботи з display-класами

 1. Створимо адаптивну розмітку, що складається з 3 секцій (L, M і R). Секція L повинна відображатися тільки на контрольній точці xl, а на інших - прихована.

Відображення при друці 

У фреймворку Bootstrap 4 є класи, за допомогою яких можна управляти видимістю елементів при друку. 

Перші три класи з цього набору (d-print-block, d-print-inline, d-print-inline-block) призначені для приховування елемента в браузері і відображення його тільки при друці (як block, inline, inline-block). 

Четвертий клас d-print-none виконує зворотну дію, він залишає елемент видимим в браузері і приховує його при друці.