Ocultar elementos en diseños responsivos de Bootstrap

Mejore su diseño de Bootstrap optimizando la visibilidad del contenido en varios tamaños de pantalla. Bootstrap ofrece funciones para mostrar elementos de menú en dispositivos más pequeños, pero ¿qué pasa con otros elementos de la página?

Para solucionar esto, Bootstrap proporciona clases "visibles" y "ocultas" que le permiten mostrar u ocultar elementos dinámicamente según la pantalla. tamaño. Las clases disponibles incluyen:

Clases visibles:

• .visible-xs-block: Mostrar en dispositivos extra pequeños (teléfonos)
• .visible-sm-block: Mostrar en dispositivos pequeños (tabletas)
• .visible-md-block: Mostrar en dispositivos medianos (escritorios)
• .visible-lg-block: Mostrar en dispositivos grandes (escritorios)

Clases ocultas:

• .hidden-xs: Ocultar en dispositivos muy pequeños (teléfonos)
• .hidden-sm: Ocultar en dispositivos pequeños (tabletas)
• .hidden-md: Ocultar en dispositivos medianos (escritorios)
• .hidden-lg: Ocultar en dispositivos grandes (escritorios)

Para ocultar sus píldoras de navegación en pantallas más pequeñas, simplemente agregue la clase .hidden-xs al contenedor respectivo.

...

Como alternativa, puede utilizar la clase "hidden-*-down", que oculta elementos en el punto de interrupción especificado o más pequeño.

...

Recuerda usar el Clase "visible-*-up" si desea mostrar el elemento en el punto de interrupción especificado o más amplio.

Para obtener más información sobre las clases de utilidad responsivas de Bootstrap, consulte su documentación oficial en http://getbootstrap.com /css/#responsive-utilities.