При верстке часто возникает ситуация, когда некоторые элементы необходимо скрыть для небольших разрешений экранов и показать на больших, и наоборот. В Bootstrap 4 для этой цели есть есть классы d-none(название происходит от значения свойства display: none !important) и d-block (display: block !important, соответственно).
Эти классы скрывают/показывают элементы на всех разрешениях экранов, но странно было бы, если бы разработчики Bootstrap не предусмотрели отзывчивые (responsive) утилиты, поэтому классов на основе d-none и d-block несколько. Их сочетание и дает отображение элементов на одних экранах и скрытие их на других.
Bootstrap 4
В таблице представлены варианты классов скрытия/отображения элементов для Bootstrap 4. Суть использования классов состоит в том, что вы указываете класс .d-{breakpoint}-none и/или .d-{breakpoint}-block.
| Размер экрана | Класс |
|---|---|
| Скрыт на всех | .d-none |
| Скрыт только на xs | .d-none .d-sm-block |
| Скрыт только на sm | .d-sm-none .d-md-block |
| Скрыт только на md | .d-md-none .d-lg-block |
| Скрыт только на lg | .d-lg-none .d-xl-block |
| Скрыт только на xl | .d-xl-none |
| Виден на всех | .d-block |
| Виден только на xs | .d-block .d-sm-none |
| Виден только на sm | .d-none .d-sm-block .d-md-none |
| Виден только на md | .d-none .d-md-block .d-lg-none |
| Виден только на lg | .d-none .d-lg-block .d-xl-none |
| Виден только на xl | .d-none .d-xl-block |
Ниже вы можете посмотреть примеры использования классов из таблицы. Количество и вид изображений будет меняться в зависимости от размера вашего экрана. Вы можете регулировать его, нажимая на вкладки HTML, CSS, JS:
See the Pen Bootstrap 4 display classes by Elen (@ambassador) on CodePen.
Для каждого блока внизу выведены названия классов, которые были применены к данному блоку с изображением.
Классы скрытия/отображения элементов для Bootstrap 5
Поскольку классы для размеров экранов были несколько изменены в Bootstrap 5, то и классы для скрытия/отображения элементов в 5-й версии этого фреймворка несколько расширились. Добавился учет размеров экрана ≥1400px с названием XX-Large и классами типа .container-xxl, .col-xxl, .col-xxl-6 и и т.п.
| Размер экрана | Класс |
|---|---|
| Скрыт при всех | .d-none |
| Скрыт только при xs | .d-none .d-sm-block |
| Скрыт только при sm | .d-sm-none .d-md-block |
| Скрыт только при md | .d-md-none .d-lg-block |
| Скрыт только при lg | .d-lg-none .d-xl-block |
| Скрыт только при xl | .d-xl-none |
| Скрыт только при xxl | .d-xxl-none |
| Виден при всех | .d-block |
| Виден только при xs | .d-block .d-sm-none |
| Виден только при sm | .d-none .d-sm-block .d-md-none |
| Виден только при md | .d-none .d-md-block .d-lg-none |
| Виден только при lg | .d-none .d-lg-block .d-xl-none |
| Виден только при xl | .d-none .d-xl-block .d-xxl-none |
| Виден только при xxl | .d-none .d-xxl-block |
Если сравнить 2 таблицы - для 4-й и 5-й версии Bootstrap, то становится заметно, что множество классов в 5-й версии наследуется из 4-й. Добавлены были только классы .d-xxl-none и .d-xxl-block. Поэтому в примере ниже вы увидите вариации использования только этих классов. Для того чтобы поэкспериментировать с разными разрешениями экрана, щелкните на ссылке 
или спрячьте боковую панель на странице.
See the Pen Bootstrap 5-alpha additional display classes by Elen (@ambassador) on CodePen.
Классы скрытия/отображения элементов для Bootstrap 3
На данный момент 3-я версия Bootstap уже отошла далеко в прошлое, но в сети еще есть ряд сайтов, сверстанные именно на этом варианте Bootstap . Поэтому в таблице ниже представлены классы, скрывающие/отображающие элементы для определенных разрешений экрана. В Bootstap-3 был несколько иной подход, чем в Bootstap-4 и 5, поэтому классы имеют приставки .visible- или .hidden-.
| Класс элемента | Телефоны и планшеты до (<) 768px |
Планшеты более (≥) 768px |
Компьютеры, ноутбуки и планшеты более (≥)992px |
Компьютеры, ноутбуки более(≥)1200px |
|---|---|---|---|---|
.visible-xs-* |
Отображается | Скрыт | Скрыт | Скрыт |
.visible-sm-* |
Скрыт | Отображается | Скрыт | Скрыт |
.visible-md-* |
Скрыт | Скрыт | Отображается | Скрыт |
.visible-lg-* |
Скрыт | Скрыт | Скрыт | Отображается |
.hidden-xs |
Hidden | Отображается | Отображается | Отображается |
.hidden-sm |
Отображается | Скрыт | Отображается | Отображается |
.hidden-md |
Отображается | Отображается | Скрыт | Отображается |
.hidden-lg |
Отображается | Отображается | Отображается | Скрыт |
Ссылки:
- Утилиты отображения Bootstrap-5 (англ)
- Утилиты отображения Bootstrap-5 (рус)
- Утилиты отображения Bootstrap-4 (рус)
- Утилиты отображения Bootstrap-4 (англ)
- Утилиты отображения Bootstrap-3 (англ)
Классы для изменения свойства display
Помимо отображения или скрытия элементов, в Bootstrap 4 и 5 предусмотрены классы для изменения свойства display, которые имеют следующие значения:
d-noned-inlined-inline-blockd-blockd-tabled-table-celld-table-rowd-flexd-inline-flex
В примере ниже вы можете использовать радио-переключатели для того, чтобы посмотреть, как работает то или иное свойство. Учтите, что при добавлении класса .d-inline для родительского элемента, вложенным в него элементам с классом .block добавляется еще класс .d-inline-block, а при добавлении класса .d-table для родителя дочерним элементам добавляется еще класс .d-table-cell для большей наглядности.
See the Pen Bootstrap 5 alpha display classes by Elen (@ambassador) on CodePen.
Если вам необходимо установить определенное значение свойства display для разных разрешений экранов, тогда нужно использовать название класса в формате .d-{breakpoint}-{value}, заменяя {breakpoint} на sm, md, lg, xl, and xxl (последний только в Bootstrap 5), а {value} на none, inline, inline-block, block, table, table-cell, table-row, flex или inline-flex.
Учтите, что все классы содержат директиву !important для любого из значений свойства display , поэтому, возможно, вам будет сложно переопределять это с помощью JavaScript.
Отображение при печати
В том случае, если вы готовите страницы своего сайта для печати, а не только для экранного просмотра, имеет смысл воспользоваться классами, изменяющими свойство display у элементов при печати.
.d-print-none.d-print-inline.d-print-inline-block.d-print-block.d-print-table.d-print-table-row.d-print-table-cell.d-print-flex.d-print-inline-flex
