Ocultar elementos en diseños responsivos con Bootstrap

Al diseñar diseños responsivos, administrar el espacio se vuelve crucial, especialmente en pantallas más pequeñas. Bootstrap brinda soporte para contraer elementos de la barra de menú para dispositivos móviles, pero ¿qué sucede si desea ocultar otros elementos de la página de manera similar?

Solución:

Bootstrap ofrece clases que le permiten para ocultar elementos según el tamaño de la pantalla:

• Dispositivos extra pequeños: Teléfonos (
• Dispositivos pequeños: Tabletas (≥768px) - .visible-sm-* (mostrar), .hidden -sm (ocultar)
• Dispositivos medianos: Computadoras de escritorio (≥992px) - .visible-md-* (mostrar), .hidden-md (ocultar)
• Dispositivos grandes: Computadoras de escritorio (≥1200px) - .visible-lg-* (mostrar), .hidden -lg (ocultar)

Uso de ejemplo:

Para ocultar un Elemento .nav-pills en pantallas pequeñas:

  ...

Notas adicionales:

• Para Bootstrap 4, use hide-*-up (oculta para puntos de interrupción más grandes) u hide-*-down (se oculta para puntos de interrupción más pequeños).
• Bootstrap 3.2.0 desaprobó .hidden-* en favor de .visible-*.
• En versiones anteriores de Bootstrap, .hidden-phone y .hidden-tablet están obsoletos.