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’

Cuando las tablas html no se adaptan a los span de bootstrap

En el ultimo proyecto web decidí usar bootstrap como base del theme wordpress a realizar y lo cierto es que tengo que agradecer a Pelayo Maojo su descubrimiento, creo que tras g960, este framework ademas de popular tiene una curva de aprendizaje similar a 960gs.

Trabajando con tablas me encontré con un problema, estas no se adaptan segun que media queries a el ancho “pactado” por los class=”spanX” de bootstrap, a lo que encontré una solución css rapida y que funciona en todos los navegadores.

Basta con añadir a la class o id de tu tabla:

.mitabla {
table-layout: fixed;
word-wrap: break-word;
}

y las tablas se ajustan al/los “span” sin problemas.