Tema 8 · Imágenes y Figuras

Imágenes Fluidas, Miniaturas y Figuras

Aprende a hacer tus imágenes 100% responsivas con .img-fluid, aplicar recortes redondeados con .rounded-circle, crear marcos con .img-thumbnail y subtitular fotos con .figure.

Tablas Estilizadas y Responsivas Botones Sólidos, Outline y Grupos

Imágenes Responsivas con .img-fluid

Por defecto, una imagen de alta resolución puede desbordar su contenedor en pantallas pequeñas. La clase .img-fluid aplica las reglas max-width: 100%; height: auto;, permitiendo que la imagen se reduzca proporcionalmente sin deformarse ni sobrepasar los límites de la pantalla. 

<img src="paisaje.jpg" class="img-fluid" alt="Imagen adaptable">

Recortes y Formas para Imágenes

Clase Efecto Geométrico Uso Común
.rounded Esquinas redondeadas suaves (border-radius). Portadas de blog, fotos de catálogo y banners.
.rounded-circle Círculo perfecto al 50%. Avatares de perfil de usuario y logos circulares.
.rounded-pill Forma ovalada de cápsula o pastilla. Banners horizontales decorativos y botones.
.img-thumbnail Añade un borde blanco de 1px con padding y sombra suave simulando una foto física. Galerías de productos y tiendas en línea.

Figuras con Leyendas (.figure)

Para acompañar una imagen con un pie de foto explicativo accesible, Bootstrap provee la clase .figure junto a .figure-img y .figure-caption: 

<figure class="figure">
  <img src="grafica.png" class="figure-img img-fluid rounded" alt="Métricas">
  <figcaption class="figure-caption text-end">Figura 1: Avance de estudiantes en Kilopolis.</figcaption>
</figure>

⚡ Galería de Avatares Circulares y Miniaturas con Bootstrap

Observa cómo .rounded-circle crea avatares perfectos y .img-thumbnail genera marcos decorativos con leyendas figure-caption:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Imágenes y Figuras Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 720px;">
    <h3 class="fw-bold mb-3">Imágenes y Formas en Kilopolis</h3>

    <div class="row g-4 align-items-center">
      <!-- 1. Avatar circular con SVG nativo -->
      <div class="col-md-4 text-center">
        <svg class="rounded-circle shadow-sm mb-2 border border-3 border-primary-subtle" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
          <rect width="100%" height="100%" fill="#2563eb"/>
          <text x="50%" y="54%" fill="#ffffff" font-family="Arial" font-size="28" font-weight="bold" dominant-baseline="middle" text-anchor="middle">DG</text>
        </svg>
        <h6 class="fw-bold mb-0">Daniel Felipe González</h6>
        <small class="text-muted">.rounded-circle</small>
      </div>

      <!-- 2. Miniatura decorativa con .img-thumbnail -->
      <div class="col-md-4 text-center">
        <div class="img-thumbnail d-inline-block shadow-sm">
          <svg width="120" height="90" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="#0f172a"/>
            <text x="50%" y="50%" fill="#38bdf8" font-family="Arial" font-size="14" dominant-baseline="middle" text-anchor="middle">.img-thumbnail</text>
          </svg>
        </div>
        <p class="small text-muted mt-2 mb-0">Marco de miniatura</p>
      </div>

      <!-- 3. Figura semántica con figure-caption -->
      <div class="col-md-4 text-center">
        <figure class="figure mb-0">
          <svg class="figure-img rounded-3 shadow-sm" width="130" height="90" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="#059669"/>
            <text x="50%" y="50%" fill="#ffffff" font-family="Arial" font-size="13" font-weight="bold" dominant-baseline="middle" text-anchor="middle">Gráfica 2026</text>
          </svg>
          <figcaption class="figure-caption text-center small">
            Figura: Crecimiento Kilopolis
          </figcaption>
        </figure>
      </div>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.