Bootstrap : Mostrar o ocultar elementos

→ Ir a la Página oficial de Bootstrap 5.1  Propiedad display 

→ Ir a la Página oficial de Bootstrap 5.3  Propiedad display

Propiedad display

Alterna de manera rápida y responsive el valor de visualización de los componentes y más con nuestras utilidades de visualización. Incluye soporte para algunos de los valores más comunes, así como algunos extras para controlar la visualización al imprimir.

Ocultar elementos

Para un desarrollo optimizado para dispositivos móviles más rápido, usa clases de visualización responsive para mostrar y ocultar elementos por dispositivo. Evita crear versiones completamente diferentes del mismo sitio; en su lugar, oculta los elementos de forma que respondan a cada tamaño de pantalla.

Para ocultar elementos, simplemente usa la clase .d-none o una de las clases .d-{sm,md,lg,xl,xxl}-none para cualquier variación de pantalla responsive.

Para mostrar un elemento solo en un intervalo dado de tamaños de pantalla, puedes combinar una clase .d-*-none con una clase .d-*-*, por ejemplo .d-none .d-md-block .d-xl-none .d-xxl-none ocultará el elemento para todos los tamaños de pantalla excepto en dispositivos medianos y grandes.

→ Oculto en pantallas más pequeñas que lg

<div class="d-lg-none">Oculto en lg y pantallas más anchas</div>
<div class="d-none d-lg-block">Oculto en pantallas más pequeñas que lg</div>

→  Bueno haciendo un ejemplo real 

Aqui la imagen se muestra desde  0px hasta 575px , (el valor de Small) es 576px hacia adelante la imagen desaparecera y no se mostrara.

 <div class="col-md-3  d-flex d-sm-none"> Mostrar imagen </div> 

Recuerda ver bootstrap 5 : Breakpoints - Tamaño de la pantalla 

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.

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:

Vea tambien

Bootstrap - Collapse (mostrar y ocultar contenido)