Twitter Bootstrap: Ocultar o mostrar div en determinados dispositivos o resoluciones


Como ya sabemos, Bootstrap tiene diferentes media queries para los dispositivos. Podemos aprovechar esta característica para ocultar o mostrar ciertos elementos (véase div) simplemente eligiendo las clases correctas:

  • Dispositivos muy pequeños o móviles (<768px) (Clases: .visible-xs-block, hidden-xs)
  • Pequeños dispositivos o tablets (≥768px) (Clases: .visible-sm-block, hidden-sm)
  • Dispositivos medianos de escritorio (≥992px) (Clases: .visible-md-block, hidden-md)
  • Dispositivos grandes de escritorio (≥1200px) (Class names : .visible-lg-block, hidden-lg)

Las clases se pueden combinar de diferentes formas:

Dispositivos muy pequeños
Teléfonos (<768px)
Dispositivos pequeños
Tablets (≥768px)
Dispositivos medianos
Escritorio (≥992px)
Dispositivos grandes
Escritorio (≥1200px)
.visible-xs-*
visible
Oculto
Oculto
Oculto
.visible-sm-*
Oculto
visible
Oculto
Oculto
.visible-md-*
Oculto
Oculto
visible
Oculto
.visible-lg-*
Oculto
Oculto
Oculto
visible
.hidden-xs
Oculto
visible
visible
visible
.hidden-sm
visible
Oculto
visible
visible
.hidden-md
visible
visible
Oculto
visible
.hidden-lg
visible
visible
visible
Oculto

Para más información: http://getbootstrap.com/css/#responsive-utilities

Dejar un Comentario