Ocultando elementos según el tamaño de pantalla de Manera Ágil en Bootstrap 4

Con Bootstrap 4 podemos crear interfaces de usuario (UI) de manera ágil o rápida, el uso de herramientas y frameworks como Bootstrap 4 son parte del desarrollo ágil y podemos enfocarnos en la lógica del proyecto y preocuparnos menos por el aspecto del mismo, no digo que descuidemos el aspecto del proyecto, solo ciertos detalles, el framework Bootstrap 4 nos brinda clases para ocultar y mostrar elementos según el tamaño de la pantalla y en este Post te enseñaré como funcionan.

Antes de continuar te invito a escuchar el Podcast: “Razones Por Las Cuales Te Cuesta Aprender A Programar”:

Spotify:	Sound Cloud:

Bien ahora continuemos con el Post: Ocultando elementos según el tamaño de pantalla de Manera Ágil en Bootstrap 4. 

En CSS tenemos la propiedad display que se le suele dar el valor none, con esto se oculta un determinado elemento, Bootstrap 4 cuenta con ciertas clases que nos permiten hacer esto, pero según el tamaño de pantalla del dispositivo en donde se esta visualizando la página o proyecto web.

Las clases se denominan clases de visualización receptivas y evitan que el desarrollador cree versiones diferentes del mismo sitio, en su lugar se ocultan los elementos de manera receptiva o adaptable para cada tamaño de pantalla.

Para ocultar los elementos podemos hacer uso de la clase d-none o una de las variantes d-(sm, md, lg, xl)-none para cualquier variación de pantalla receptiva. Si queremos mostrar un elemento solo en un intervalo determinado de tamaños de pantalla podemos combinar la clase d-*-none con una de las clases por ejemplo d-none, d-md-block, d-xl-none, estas clases ocultarán un elemento para todos los tamaños de pantalla, excepto en los dispositivos medianos y grandes.

Veamos a continuación una tabla con los tamaños de pantalla y sus respectivas clases de Bootstrap.

Tamaño de pantalla	Clase
Escondido en todos	.d-none
Oculto solo en xs	.d-none .d-sm-block
Oculto solo en sm	.d-sm-none .d-md-block
Oculto solo en md	.d-md-none .d-lg-block
Oculto solo en lg	.d-lg-none .d-xl-block
Oculto solo en xl	.d-xl-none
Visible en todos	.d-block
Visible solo en xs	.d-block .d-sm-none
Visible solo en sm	.d-none .d-sm-block .d-md-none
Visible solo en md	.d-none .d-md-block .d-lg-none
Visible solo en lg	.d-none .d-lg-block .d-xl-none
Visible solo en xl	.d-none .d-xl-block

Entonces por ejemplo si queremos ocultar un texto y una imagen o cualquier otro elemento en pantallas grandes y anchas podemos hacer lo siguiente.

En el código anterior, el primer div con la clase d-lg-none es el contenido que se ocultará cuando es visto en una pantalla ancha como la de una computadora o  Desktop y cuando sea visto en una dispositivo móvil, pues si se mostrará.

Por ejemplo si abrimos el contenido en una pantalla grande, el texto y la imagen se ocultan.

Y si abrimos el contenido en un dispositivo móvil que tiene pantalla mas chica, pues se muestra el texto con el logo.

No es esto genial ?

Con las clases de visualización receptivas de Bootstrap 4, podemos ocultar y mostrar elementos rápidamente o de manera ágil en diferentes tamaños de pantalla sin tener que escribir mucho código.

Puedes aprender más sobre estas clases, en el siguiente enlace de la página oficial de Bootstrap 4.

Conclusión

En este Post has aprendido que con Bootstrap 4 podemos realizar determinadas tareas con clases nativas del propio framework, para que las domines debes de ponerlas en práctica, así que manos a la obra. 

Nota (s)

• El código expuesto en este tutorial, puede quedar obsoleto, continuar o cambiar, esto no depende de mi, si no de los desarrolladores que dan soporte a Bootstrap.
• No olvides que debemos utilizar la tecnología para hacer cosas buenas por el mundo. 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.