Display Properties de Bootstrap 4. Equivalencias con el antiguo .hidden-* de la versión anterior

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’

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: