Utilidades Responsive
Bootstrap también incluye una serie de clases para ayudarnos a mostrar u ocultar contenidos según el tamaño del dispositivo. En primer lugar vamos a ver las clases base que utlizaremos para estas acciones:
.d-none: Oculta el elemento sobre el que se aplique..d-inline: Muestra el elemento de forma "inline", es decir, permitiendo otros elementos por los lados y ocupando el ancho justo..d-block: Muestra el elemento en forma de bloque, ocupando todo el ancho disponible y sin permitir otros elementos por los lados..d-inline-block:Muestra el elemento en forma de bloque, pero ocupando el ancho justo y permitiendo otros elementos por los lados.
A continuación podemos ver un ejemplo del efecto obtenido al aplicar las distintas etiquetas de las que disponemos para mostrar elementos:
La diferencia entre las etiquetas "d-inline" y "d-inline-block" es el comportamiento de bloque que adopta el elemento, el cual respetará todos los márgenes y alguras que le indiquemos.
Al aplicar estas etiquetas sobre un elemento lo mostraremos u ocultaremos para todos los tamaños, sin embargo, si queremos podemos añadirles modificadores para indicar el tamaño a partir del cual queremos que se muestren u oculten. En este último caso tendremos que añadir el tamaño de pantalla entre el prefijo "d-" y el sufijo none, inline, block o inline-block, es decir, siguiendo el patrón "d-*-*". Por ejemplo, podremos indicar d-sm-none para que se oculte a partir del tamaño pequeño de pantalla, d-xl-none para que se oculte para las pantallas extra granes, o d-md-block para que se muestre en forma de bloque a partir del tamaño md.
Es importante que nos fijemos que estas utilidades responsive se aplicarán a partir del tamaño indicado en adelante, sin embargo, ¿cómo podríamos hacer para que solamente se oculte o se muestre para un tamaño de pantalla? Para esto podemos combinar varias clases, por ejemplo, para que solo se oculte para el tamaño extra pequeño tendríamos que poner "d-none d-sm-block", o para que solo se muestre para el tamaño pequeño usaríamos "d-none d-sm-block d-md-none".
A continuación se incluye una tabla resumen de las etiquetas que tendríamos que aplicar para mostrar u ocultar solamente para un tamaño de pantalla:
Last updated
