Esta es una tabla de equivalencias de Bootstrap 4 para las propiedades de visualización del framework (Bootstrap 4 Display Properties)
De acuerdo con la documentacion, desde la beta 1 se ha mandado a paseo (ya se avisaba…) las utilidades responsive de la Alpha (Responsive Utilities) (concretamente las clases .hidden-* entraban en conflicto con el método hidden() de jQuery.
Parece que esa documentación, además de escasa, da bastante a confusión, doy fe… ya que vengo de Bootstrap 3 y he decidido usar al fin Bootstrap 4 en nuevos proyectos, por lo que incluso, el que haya usado ya las versiones Alpha se verán con el mismo problema.
El concepto ahora, no es que sea mas o menos simple, pero si antes con un .hidden-* solucionabas, ahora requerirás mas de una clase .d-* para obtener el mismo resultado.
A falta de una mejor explicacion en la documentación y a modo de chuleta, este cuadro te (me) ayudará a resolver esos casos en los que, viniendo de bootstrap 3 o de las versiones alpha de Bootstrap 4, te encontrarás que hidden-*, etc ya no existe:
| Clase BS3 | XS
(<544px) |
SM
(≥544px – <768px) |
MD
(≥768px – <992px) |
LG
(≥992px – <1200px) |
XL
(≥1200px) |
Clase BS4 equivalente | |
|---|---|---|---|---|---|---|---|
| hidden-xs-down | Oculto | Visible | Visible | Visible | Visible | d-none d-sm-block | |
| hidden-sm-down | Oculto | Oculto | Visible | Visible | Visible | d-none d-md-block | |
| hidden-md-down | Oculto | Oculto | Oculto | Visible | Visible | d-none d-lg-block | |
| hidden-lg-down | Oculto | Oculto | Oculto | Oculto | Visible | d-none d-xl-block | |
| hidden-xl-down | Oculto | Oculto | Oculto | Oculto | Oculto | d-none | |
| hidden-xs-up | Oculto | Oculto | Oculto | Oculto | Oculto | d-none | |
| hidden-sm-up | Visible | Oculto | Oculto | Oculto | Oculto | d-sm-none | |
| hidden-md-up | Visible | Visible | Oculto | Oculto | Oculto | d-md-none | |
| hidden-lg-up | Visible | Visible | Visible | Oculto | Oculto | d-lg-none | |
| hidden-xl-up | Visible | Visible | Visible | Visible | Oculto | d-xl-none | |
| hidden-xs (solo) | Oculto | Visible | Visible | Visible | Visible | d-none d-sm-block | |
| hidden-sm (solo) | Visible | Oculto | Visible | Visible | Visible | d-block d-sm-none d-md-block | |
| hidden-md (solo) | Visible | Visible | Oculto | Visible | Visible | d-block d-md-none d-lg-block | |
| hidden-lg (solo) | Visible | Visible | Visible | Oculto | Visible | d-block d-lg-none d-xl-block | |
| hidden-xl (solo) | Visible | Visible | Visible | Visible | Oculto | d-block d-xl-none | |
| visible-xs (solo) | Visible | Oculto | Oculto | Oculto | Oculto | d-block d-sm-none | |
| visible-sm (solo) | Oculto | Visible | Oculto | Oculto | Oculto | d-none d-sm-block d-md-none | |
| visible-md (solo) | Oculto | Oculto | Visible | Oculto | Oculto | d-none d-md-block d-lg-none | |
| visible-lg (solo) | Oculto | Oculto | Oculto | Visible | Oculto | d-none d-lg-block d-xl-none | |
| visible-xl (solo) | Oculto | Oculto | Oculto | Oculto | Visible | d-none d-xl-block |
RESUMEN:
- ‘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’ (siempre oculton)
- ‘hidden-xs-up’ = ‘d-none’ (siempre oculto)
- ‘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’ (solo) = ‘d-none d-sm-block’ (igual que ‘hidden-xs-down’)
- ‘hidden-sm’ (solo) = ‘d-block d-sm-none d-md-block’
- ‘hidden-md’ (solo = ‘d-block d-md-none d-lg-block’
- ‘hidden-lg’ (solo) = ‘d-block d-lg-none d-xl-block’
- ‘hidden-xl’ (solo) = ‘d-block d-xl-none’
- ‘visible-xs’ (solo) = ‘d-block d-sm-none’
- ‘visible-sm’ (solo) = ‘d-none d-sm-block d-md-none’
- ‘visible-md’ (solo) = ‘d-none d-md-block d-lg-none’
- ‘visible-lg’ (solo) = ‘d-none d-lg-block d-xl-none’
- ‘visible-xl’ (solo) = ‘d-none d-xl-block’