Классы 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