После обновления популярного фреймворка Bootstrap до 4-й версии некоторые владельцы сайтов столкнулись с тем, что классы отвечающие за отображение блоков на определенных размерах экранов перестали работать. Классы вида hidden-* и visible-* активно использовались в 3й версии Bootstrap для разработки в том числе и в нашей студии.
4-я версия Bootstrap Больше не поддерживает классы hidden-* и visible-*, но необходимый для их работы функционал остался. Если вы хотите скрыть элемент на определенном размере экрана вы должны использовать класс d-*
Чтобы было проще и нагляднее, ниже представлены старые классы и их аналоги в Bootstrap 4.
| Класс в Bootstrap 3 | Аналог в Bootstrap 4 |
|---|---|
| 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 |
| hidden-xl-down | d-none (аналог hidden) |
| hidden-xs-up | d-none (аналог 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 |
| hidden-xs (только) | d-none d-sm-block (аналог hidden-xs-down) |
| hidden-sm (только) | d-block d-sm-none d-md-block |
| hidden-md (только) | d-block d-md-none d-lg-block |
| hidden-lg (только) | d-block d-lg-none d-xl-block |
| hidden-xl (только) | d-block d-xl-none |
| visible-xs (только) | d-block d-sm-none |
| visible-sm (только) | d-none d-sm-block d-md-none |
| visible-md (только) | d-none d-md-block d-lg-none |
| visible-lg (только) | d-none d-lg-block d-xl-none |
| visible-xl (только) | d-none d-xl-block |