Классы visible-** и hidden-** в Bootstrap 4

Классы hidden-* и visible-* убраны в Bootstrap 4.

Чтобы скрыть элемент используйте d-none класс или d-{sm,md,lg,xl}-none класс для соответствующего брейкпоинта. Отдельного xs нет, так как он используется по-умолчанию.

Чтобы показать элемент но определённом брейкпоинте следует объеденить один из .d-*-none классов c .d-*-* классами, например .d-none .d-md-block .d-xl-none скроет элемент для всех размеров экрана, за исключением md и lg.

Размер экрана Классы
Скрыть на всех .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

Соответствие классам из Bootstrap 3

Show/hide for breakpoint and down:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block

Show/hide for breakpoint and up:

hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

Похожие записи