Tabla de contenido

Las tarjetas (cards) son uno de los componentes más usados en el diseño web moderno. Sirven para mostrar artículos de blog, productos, perfiles de usuarios, funcionalidades de un servicio o cualquier contenido que necesite un contenedor bien definido. Bootstrap 5 incluye un sistema de cards muy flexible.

Estructura básica de una Card

<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <h6 class="card-subtitle mb-2 text-muted">Subtítulo</h6>
    <p class="card-text">Descripción del contenido de la tarjeta con información relevante.</p>
    <a href="#" class="card-link">Ver más</a>
    <a href="#" class="card-link">Compartir</a>
  </div>
</div>

Las clases principales:

  • card: el contenedor principal
  • card-body: el área de contenido con padding
  • card-title, card-subtitle, card-text: tipografía del contenido
  • card-link: estiliza los enlaces dentro de la card

Card con imagen

<div class="card" style="width: 20rem;">
  <!-- Imagen al inicio (arriba) -->
  <img src="/images/articulo.webp" class="card-img-top" alt="Imagen del artículo">
  
  <div class="card-body">
    <span class="badge bg-primary mb-2">JavaScript</span>
    <h5 class="card-title">Cómo usar async/await en JavaScript</h5>
    <p class="card-text">Aprende a manejar código asíncrono de forma legible con async/await.</p>
  </div>
  
  <div class="card-footer d-flex justify-content-between align-items-center">
    <small class="text-muted">26 Mar 2026</small>
    <a href="/articulo" class="btn btn-sm btn-outline-primary">Leer artículo</a>
  </div>
</div>

Variaciones de Card

Card con fondo de color:

<div class="card text-white bg-primary mb-3">
  <div class="card-header">Destacado</div>
  <div class="card-body">
    <h5 class="card-title">Artículo especial</h5>
    <p class="card-text">Este artículo tiene un estilo diferente.</p>
  </div>
</div>

Card de perfil:

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <img src="/avatar.webp" class="rounded-circle mb-3" width="80" height="80" alt="Avatar">
    <h5 class="card-title mb-1">8devmx</h5>
    <p class="text-muted mb-3">Frontend Developer</p>
    <div class="d-flex justify-content-center gap-2">
      <a href="#" class="btn btn-primary btn-sm">Seguir</a>
      <a href="#" class="btn btn-outline-secondary btn-sm">Mensaje</a>
    </div>
  </div>
</div>

Card horizontal (imagen + texto lado a lado):

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-4">
      <img src="/imagen.webp" class="img-fluid rounded-start h-100 object-fit-cover" alt="Imagen">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h5 class="card-title">Artículo en formato horizontal</h5>
        <p class="card-text">Descripción breve del artículo...</p>
        <p class="card-text"><small class="text-muted">Hace 3 días</small></p>
      </div>
    </div>
  </div>
</div>

Grid de Cards

Para mostrar múltiples cards en un grid responsivo, combina con el sistema de grid de Bootstrap:

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    
    <div class="col">
      <div class="card h-100">
        <img src="/img1.webp" class="card-img-top" alt="Artículo 1">
        <div class="card-body">
          <h5 class="card-title">JavaScript desde cero</h5>
          <p class="card-text">Aprende los fundamentos del lenguaje más usado en la web.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary btn-sm">Leer más</a>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100">
        <img src="/img2.webp" class="card-img-top" alt="Artículo 2">
        <div class="card-body">
          <h5 class="card-title">PHP y MySQL</h5>
          <p class="card-text">Crea aplicaciones web dinámicas con PHP y bases de datos.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary btn-sm">Leer más</a>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card h-100">
        <img src="/img3.webp" class="card-img-top" alt="Artículo 3">
        <div class="card-body">
          <h5 class="card-title">Git y GitHub</h5>
          <p class="card-text">Control de versiones indispensable para todo desarrollador.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary btn-sm">Leer más</a>
        </div>
      </div>
    </div>

  </div>
</div>

h-100 en la card hace que todas tengan la misma altura. row-cols-{n} define cuántas columnas de cards hay por fila según el breakpoint.

Card con cabecera y pie

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Recientes</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Populares</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Lista de artículos</h5>
    <p class="card-text">Aquí aparecería el listado de artículos...</p>
  </div>
  <div class="card-footer text-muted">
    Última actualización hace 3 días
  </div>
</div>

Grupos de Cards

Si quieres cards sin espacios entre ellas, como en un panel:

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Contenido de la primera tarjeta.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Contenido de la segunda tarjeta con más texto para probar la altura.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Contenido de la tercera.</p>
    </div>
  </div>
</div>

card-group hace que todas las cards tengan la misma altura automáticamente y se queden pegadas.

Las cards son la forma más versátil de Bootstrap para presentar contenido. Desde un simple blog hasta un ecommerce con productos, siempre encontrarás un uso para ellas.