Bootstrap 3, 4 и 5: классы для скрытия/отображения элементов на разных экранах

При верстке часто возникает ситуация, когда некоторые элементы необходимо скрыть для небольших разрешений экранов и показать на больших, и наоборот. В 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.dark

Для каждого блока внизу выведены названия классов, которые были применены к данному блоку с изображением.

Классы скрытия/отображения элементов для 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.dark

Классы скрытия/отображения элементов для 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-none
d-inline
d-inline-block
d-block
d-table
d-table-cell
d-table-row
d-flex
d-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.dark

Если вам необходимо установить определенное значение свойства 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 у элементов при печати.