Visibilidad e interacción

<< Colores y fondos Tipografía y texto >>

Visibilidad e interacción

Sistema Display (Mostrar y Ocultar)

Esta es, posiblemente, la utilidad más importante para el diseño Responsive. La propiedad display determina si un elemento es un bloque, una línea, o si no existe visualmente.

Las clases siguen el patrón d-{valor} o d-{breakpoint}-{valor}.

  • d-none: Desaparece el elemento por completo (no ocupa espacio).
  • d-block: Lo muestra como bloque (ocupa todo el ancho).
  • d-inline: Lo muestra en línea (como una palabra dentro de un texto).
  • d-flex: Lo convierte en un contenedor flexible (para alinear cosas dentro).

Puedes combinar clases para mostrar u ocultar elementos según el tamaño de la pantalla.

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Este ejemplo, empieza oculto (d-none), pero a partir del tamaño medio (lg), conviértete en bloque (-block)."

Visibilidad vs. Display (invisible vs d-none)

A veces quieres ocultar algo pero no quieres que el diseño se mueva (quieres dejar el hueco vacío). Para eso existe visibility.

  • d-none: El elemento se elimina. Los demás elementos ocupan su lugar.
  • invisible: El elemento es invisible, pero sigue ocupando su espacio físico. Es como un fantasma que empuja a los demás.
  • visible: Para volver a mostrar algo que estaba invisible.

Accesibilidad (Visually Hidden)

Esto es vital para hacer webs profesionales y accesibles (SEO y lectores de pantalla).

Uso: Etiquetas de botones que solo tienen un icono.

<button class="btn btn-primary">
  <i class="icono-lupa"></i>
  <span class="visually-hidden">Buscar</span>
</button>

Si no pones esto, un ciego solo escuchará "Botón", sin saber para qué sirve.

Interacción (Pointer y Selection)

Controla qué puede hacer el usuario con el ratón o el dedo.

User Select (Selección de texto)

Define si el usuario puede sombrear/copiar el texto

  • user-select-none: El texto no se puede seleccionar. Ideal para botones, menús o elementos de app que parecen nativos.
  • user-select-all: Al hacer un clic, se selecciona todo el texto. Ideal para cajas de código o IDs que el usuario debe copiar.
  • user-select-auto: Comportamiento normal.

Pointer Events (Eventos de ratón)

Bootstrap tiene las clases .pe-none y .pe-autopara evitar o añadir iteraciones de elementos.

  • pe-none: El elemento ignora los clics. Es como si fuera transparente para el ratón; el clic "atraviesa" el elemento y le da a lo que haya detrás. Uso: Desactivar botones visualmente sin usar el atributo disabled, o poner una capa decorativa encima de un mapa y poder seguir moviendo el mapa.
  • pe-auto: Reactiva los clics.

Posicionamiento (position)

Bootstrap te permite posicionar elementos sin tocar el CSS, ideal para badges, notificaciones o menús fijos.

Tipos de Posición

  • position-relative: El padre. Referencia para los hijos.
  • position-absolute: El hijo que flota libremente dentro del padre.
  • fixed-top / fixed-bottom: Fija una barra al techo o suelo de la ventana (el menú que te persigue al hacer scroll).
  • sticky-top: Se queda pegado arriba cuando haces scroll y llegas a él.

Coordenadas (Top, Start, End, Bottom)

Una vez tienes algo absolute, lo mueves con porcentajes:

  • top-0, top-50, top-100.
  • start-0, end-0.
  • translate-middle: Centra el elemento exactamente sobre la coordenada.

Desbordamiento (Overflow)

¿Qué pasa si el contenido es más grande que la caja?

  • overflow-hidden: Corta lo que sobra (muy útil para redondear imágenes dentro de tarjetas cuadradas).
  • overflow-auto: Añade barras de scroll si es necesario.
  • overflow-visible: (Por defecto) Deja que el contenido se salga.

<< Colores y fondos Tipografía y texto >>