Tema 13 · Tarjetas

Tarjetas de Contenido (Cards)

Aprende a maquetar el componente reina de Bootstrap 5: contenedor .card, cuerpo .card-body, títulos, cabeceras, pies de tarjeta, imágenes superiores y capas superpuestas (overlay).

Spinners y Marcadores de Carga Grupos de Listas (List Groups) y Paginación

Anatomía de una Tarjeta en Bootstrap 5

La tarjeta (Card) es el contenedor modular más versátil del diseño moderno. Reemplaza a los antiguos páneles, pozos (wells) y miniaturas de versiones pasadas en un único componente cohesivo. 

<div class="card shadow-sm">
  <div class="card-header">Cabecera opcional</div>
  <div class="card-body">
    <h5 class="card-title">Título de la Tarjeta</h5>
    <h6 class="card-subtitle mb-2 text-muted">Subtítulo descriptivo</h6>
    <p class="card-text">Párrafo explicativo con los detalles del contenido.</p>
    <a href="#" class="btn btn-primary">Acción Principal</a>
  </div>
  <div class="card-footer text-muted">Pie de tarjeta con metadatos</div>
</div>

Imágenes en Tarjetas: Superiores y Capas (Overlay)

  • Imagen Superior (.card-img-top): Corona la tarjeta ajustando sus esquinas superiores al radio del contenedor sin desbordarse.
  • Capa sobre Imagen (.card-img-overlay): Convierte el contenido de texto en una capa superpuesta semitransparente directamente encima de la foto.

Rejillas de Tarjetas de Altura Igualada

Para que varias tarjetas en una misma fila tengan automáticamente exactamente la misma altura sin importar que una tenga más texto que otra, combina el sistema de rejilla con la clase .h-100: 

<div class="col-md-4">
  <div class="card h-100 shadow-sm">
    <!-- La tarjeta se estira al 100% de la altura de la fila -->
  </div>
</div>

⚡ Cuadrícula de Tarjetas con Alturas Igualadas (h-100)

Observa cómo las dos tarjetas mantienen una altura impecable y uniforme utilizando .h-100, complementadas con card-header y card-footer:

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>Tarjetas en 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: 780px;">
    <h3 class="fw-bold mb-3">Planes Formativos en Kilopolis</h3>

    <div class="row g-4">
      <!-- Tarjeta 1: Plan Básico -->
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-0 rounded-4 overflow-hidden">
          <div class="card-header bg-white border-bottom p-3">
            <span class="badge bg-secondary-subtle text-secondary fw-bold px-3 py-1 rounded-pill">
              Inicial
            </span>
            <h4 class="fw-bold text-dark mt-2 mb-0">Plan Desarrollador</h4>
          </div>
          <div class="card-body p-4 d-flex flex-column">
            <p class="card-text text-secondary mb-4">
              Acceso completo a todos los manuales de HTML5, CSS3 y Bootstrap 5 con ejercicios interactivos en el editor en vivo.
            </p>
            <div class="mt-auto">
              <h3 class="fw-bold text-dark mb-3">Gratuito</h3>
              <button class="btn btn-outline-primary w-100 fw-semibold rounded-pill" onclick="alert('¡Iniciado plan Desarrollador!')">
                Comenzar Lecciones &raquo;
              </button>
            </div>
          </div>
          <div class="card-footer bg-light text-muted small p-3">
            Actualizaciones continuas incluidas
          </div>
        </div>
      </div>

      <!-- Tarjeta 2: Plan Pro Destacado -->
      <div class="col-md-6">
        <div class="card h-100 shadow-sm border-2 border-primary rounded-4 overflow-hidden">
          <div class="card-header bg-primary text-white p-3">
            <span class="badge bg-white text-primary fw-bold px-3 py-1 rounded-pill">
              Más Popular
            </span>
            <h4 class="fw-bold mt-2 mb-0">Plan Fullstack Pro</h4>
          </div>
          <div class="card-body p-4 d-flex flex-column">
            <p class="card-text text-secondary mb-4">
              Incluye JavaScript ES6+, PHP 8.3, bases de datos MySQL en tiempo real, proyectos desplegables y tutoría con Sócrates AI.
            </p>
            <div class="mt-auto">
              <h3 class="fw-bold text-primary mb-3">$29 <small class="fs-6 text-muted fw-normal">/mes</small></h3>
              <button class="btn btn-primary w-100 fw-semibold rounded-pill shadow-sm" onclick="alert('¡Plan Pro seleccionado!')">
                Suscribirme con Descuento &raquo;
              </button>
            </div>
          </div>
          <div class="card-footer bg-primary-subtle text-primary small p-3 fw-semibold">
            Garantía de satisfacción Kilopolis
          </div>
        </div>
      </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.