Componentes de Bootstrap

Imágenes y figuras

Cómo se adaptan las imágenes a su caja y cómo llevan un pie.

Las imágenes nunca deben romper la maquetación: escalan con su contenedor y mantienen sus proporciones. Una figura une una imagen con su pie.

Cuándo usarlo

Úsalo

Hacer fluidas las imágenes (img-fluid) para que nunca se desborden.
Dar a toda imagen con significado un texto alternativo; marcar las decorativas con un alt vacío.
Usar una figura con pie cuando la imagen necesita explicación.

No

Meter texto dentro de una imagen.
Estirar una imagen: recórtala.
Usar una imagen para algo que un icono real puede decir.

Anatomía

Una imagen (img) con una forma (rounded, rounded-circle, img-thumbnail), sola o dentro de una figura (figure) con un pie (figure-caption).

Variantes y estados

Formas y figura

A caption for the image above, short and descriptive.

Combinaciones

Combinación	Para qué usarla
Fluida × miniatura	`img-fluid` en cada imagen; la miniatura para una vista previa pequeña con marco.
Redondeada × círculo	Redondeada para fotos, un círculo solo para personas.
Figura × pie	Una figura cuando la imagen necesita una frase para entenderse.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
El marco de la miniatura es una línea fina con radio	Combina con los bordes de tarjetas y campos en vez de una línea gris pesada.
El pie es pequeño y apagado	Explica la imagen sin competir con el texto que la rodea.

Clases

Clase	Qué hace
`img-fluid`	Escala con su contenedor
`img-thumbnail`	Borde y relleno
`rounded`, `rounded-circle`	Forma
`figure`, `figure-img`, `figure-caption`	Imagen con pie

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.

Accesibilidad

Las imágenes con significado llevan alt que diga qué muestran, no que son imágenes.
Las decorativas llevan alt="".
El pie es texto real, no parte de la imagen.