Beta 1 Display Properties de Bootstrap. Equivalencias con el antiguo .hidden-*

Esta es una tabla de equivalencias de la Alpha 6 Responsive Utilities a la Beta 1 Display Properties del framework Bootstrap

De acuerdo con la documentacion, Beta 1 a 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 la beta de 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 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:

XS (<544px) SM (≥544px – <768px) MD (≥768px – <992px) LG (≥992px – <1200px) XL (≥1200px) Equivalencia Bootstrap 4 Beta
.hidden-xs-down Hidden Visible Visible Visible Visible .d-none .d-sm-*
.hidden-sm-down Hidden Hidden Visible Visible Visible .d-none .d-md-*
.hidden-md-down Hidden Hidden Hidden Visible Visible .d-none .d-lg-*
.hidden-lg-down Hidden Hidden Hidden Hidden Visible .d-none .d-xl-*
.hidden-xl-down Hidden Hidden Hidden Hidden Hidden .d-none
.hidden-xs-up Hidden Hidden Hidden Hidden Hidden .d-none
.hidden-sm-up Visible Hidden Hidden Hidden Hidden .d-sm-none
.hidden-md-up Visible Visible Hidden Hidden Hidden .d-md-none
.hidden-lg-up Visible Visible Visible Hidden Hidden .d-lg-none
.hidden-xl-up Visible Visible Visible Visible Hidden .d-xl-none
Loading Facebook Comments ...

Deja un comentario