Bootstrap 4

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:

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’