Tarjetas cards

Estructura básica de las cards

Las cards representan uno de los componentes más versátiles de Bootstrap, funcionando como contenedores flexibles que permiten organizar información de manera estructurada y visualmente atractiva. Su diseño modular facilita la creación de interfaces consistentes y profesionales.

Anatomía fundamental de una card

Una card se construye mediante una estructura jerárquica que comienza siempre con el elemento contenedor principal. La clase .card establece las bases visuales del componente, proporcionando bordes sutiles, esquinas redondeadas y el espaciado interno apropiado.

<div class="card">
  <!-- Contenido de la card -->
</div>

Esta estructura básica crea un contenedor neutral que puede albergar cualquier tipo de contenido, desde texto simple hasta elementos más complejos como imágenes y botones.

Las tres secciones principales

Bootstrap organiza el contenido de las cards en tres secciones claramente diferenciadas, cada una con su propósito específico y sus clases correspondientes:

Card Header (.card-header):

<div class="card">
  <div class="card-header">
    Encabezado de la card
  </div>
</div>

El header funciona como la zona de identificación de la card, típicamente reservada para títulos principales, navegación interna o elementos de control. Visualmente se distingue por un fondo ligeramente diferenciado y bordes que la separan del resto del contenido.

Card Body (.card-body):

<div class="card">
  <div class="card-body">
    <p>Contenido principal de la card</p>
  </div>
</div>

El body representa el área de contenido principal donde reside la información más importante. Esta sección incluye automáticamente el padding apropiado y se comporta como un contenedor flexible que se adapta al contenido que alberga.

Card Footer (.card-footer):

<div class="card">
  <div class="card-footer">
    Pie de la card
  </div>
</div>

El footer sirve como zona de acciones secundarias o información complementaria, manteniendo una separación visual clara del contenido principal mediante bordes y un estilo visual diferenciado.

Card completa con todas las secciones

La estructura más completa combina las tres secciones en una jerarquía lógica que facilita tanto la lectura como el mantenimiento del código:

<div class="card">
  <div class="card-header">
    <h5 class="mb-0">Título de la Card</h5>
  </div>
  <div class="card-body">
    <p class="card-text">
      Este es el contenido principal de la card donde se incluye 
      la información más relevante para el usuario.
    </p>
  </div>
  <div class="card-footer text-muted">
    Información adicional o acciones secundarias
  </div>
</div>

Flexibilidad estructural

Las cards permiten combinaciones parciales de estas secciones según las necesidades específicas de cada caso. No es obligatorio incluir todas las secciones en cada card:

Card solo con body:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Título</h5>
    <p class="card-text">Contenido directo sin header ni footer.</p>
  </div>
</div>

Card con header y body:

<div class="card">
  <div class="card-header">
    Panel de Control
  </div>
  <div class="card-body">
    <p>Configuraciones y opciones disponibles.</p>
  </div>
</div>

Esta flexibilidad estructural hace que las cards se adapten perfectamente a diferentes contextos de uso, desde elementos informativos simples hasta componentes más complejos que requieren separación clara entre diferentes tipos de contenido.

La consistencia visual se mantiene automáticamente gracias a las clases predefinidas de Bootstrap, asegurando que todas las cards mantengan una apariencia cohesiva independientemente de su estructura interna específica.

Contenido de cards: imágenes, textos y títulos

El verdadero potencial de las cards se manifiesta cuando comenzamos a incorporar contenido rico y diverso dentro de su estructura. Bootstrap proporciona clases específicas que optimizan la presentación de diferentes tipos de elementos, creando una experiencia visual coherente y profesional.

Elementos de texto especializados

Bootstrap define clases específicas para los elementos de texto más comunes dentro de las cards, cada una con su propósito semántico y visual claramente definido.

Títulos de card (.card-title):

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Perfil de Usuario</h5>
    <p class="card-text">Información básica del perfil.</p>
  </div>
</div>

La clase .card-title está diseñada para títulos principales dentro del contenido de la card. Aunque puede aplicarse a cualquier elemento de encabezado (h1-h6), se integra perfectamente con el espaciado y la tipografía del componente.

Texto del cuerpo (.card-text):

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Artículo Destacado</h5>
    <p class="card-text">
      Este artículo explora las mejores prácticas para el desarrollo 
      de interfaces web modernas utilizando frameworks CSS.
    </p>
    <p class="card-text">
      <small class="text-muted">Última actualización hace 3 minutos</small>
    </p>
  </div>
</div>

La clase .card-text proporciona el espaciado óptimo para párrafos y contenido textual, asegurando que múltiples bloques de texto mantengan una separación visual apropiada.

Integración de imágenes

Las imágenes representan uno de los elementos más impactantes en las cards. Bootstrap ofrece múltiples enfoques para su integración, cada uno adaptado a diferentes necesidades de diseño.

Imágenes superiores (.card-img-top):

<div class="card" style="width: 18rem;">
  <img src="producto-ejemplo.jpg" class="card-img-top" alt="Producto destacado">
  <div class="card-body">
    <h5 class="card-title">Producto Premium</h5>
    <p class="card-text">
      Descripción detallada del producto con sus características 
      más importantes y beneficios principales.
    </p>
    <a href="#" class="btn btn-primary">Ver Detalles</a>
  </div>
</div>

Las imágenes con .card-img-top se posicionan en la parte superior de la card, creando un impacto visual inmediato. Esta clase ajusta automáticamente las esquinas superiores de la imagen para que coincidan con el border-radius de la card.

Imágenes inferiores (.card-img-bottom):

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Receta Especial</h5>
    <p class="card-text">
      Ingredientes y pasos para preparar este delicioso plato 
      que conquistará a toda la familia.
    </p>
  </div>
  <img src="plato-terminado.jpg" class="card-img-bottom" alt="Plato final">
</div>

La clase .card-img-bottom sitúa la imagen al final de la card, ideal cuando queremos que el contenido textual tenga prioridad visual o cuando la imagen funciona como complemento del texto.

Imágenes como overlay (.card-img):

<div class="card bg-dark text-white">
  <img src="paisaje.jpg" class="card-img" alt="Paisaje montañoso">
  <div class="card-img-overlay">
    <h5 class="card-title">Aventura en la Montaña</h5>
    <p class="card-text">
      Descubre los senderos más espectaculares de la región 
      y vive una experiencia inolvidable.
    </p>
    <p class="card-text">
      <small>Última expedición: Marzo 2024</small>
    </p>
  </div>
</div>

Las imágenes con .card-img ocupan todo el espacio de la card, permitiendo superponer contenido mediante .card-img-overlay. Esta técnica es especialmente efectiva para crear cards con fuerte impacto visual.

Combinaciones de contenido enriquecido

La verdadera versatilidad de las cards emerge cuando combinamos diferentes tipos de elementos de contenido, creando componentes informativos y atractivos.

Card de perfil de usuario:

<div class="card" style="width: 20rem;">
  <img src="avatar-usuario.jpg" class="card-img-top" alt="Avatar">
  <div class="card-body text-center">
    <h5 class="card-title">María González</h5>
    <p class="card-text text-muted">Desarrolladora Frontend</p>
    <p class="card-text">
      Especializada en React y Bootstrap con más de 5 años 
      de experiencia creando interfaces modernas.
    </p>
    <span class="badge bg-primary">React</span>
    <span class="badge bg-success">CSS</span>
    <span class="badge bg-info">Bootstrap</span>
  </div>
</div>

Card de producto con información estructurada:

<div class="card" style="width: 18rem;">
  <img src="laptop-gaming.jpg" class="card-img-top" alt="Laptop Gaming">
  <div class="card-body">
    <h5 class="card-title">Gaming Laptop Pro</h5>
    <h6 class="card-subtitle mb-2 text-muted">Modelo 2024</h6>
    <p class="card-text">
      Portátil de alto rendimiento diseñado para gaming y 
      trabajo profesional con las últimas tecnologías.
    </p>
    <ul class="list-unstyled">
      <li><strong>Procesador:</strong> Intel i7-12700H</li>
      <li><strong>RAM:</strong> 32GB DDR5</li>
      <li><strong>GPU:</strong> RTX 4070</li>
    </ul>
  </div>
  <div class="card-footer d-flex justify-content-between align-items-center">
    <span class="h5 mb-0 text-success">€1,299</span>
    <button class="btn btn-primary btn-sm">Añadir al Carrito</button>
  </div>
</div>

Subtítulos y elementos complementarios

Bootstrap incluye clases específicas para elementos de texto secundarios que enriquecen la jerarquía informativa de las cards.

Subtítulos (.card-subtitle):

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Conferencia Anual de Tecnología</h5>
    <h6 class="card-subtitle mb-2 text-muted">15-17 Septiembre 2024</h6>
    <p class="card-text">
      Tres días de charlas, talleres y networking con los mejores 
      profesionales del sector tecnológico.
    </p>
    <a href="#" class="btn btn-outline-primary">Reservar Plaza</a>
  </div>
</div>

La clase .card-subtitle proporciona un nivel intermedio de jerarquía visual entre el título principal y el contenido del cuerpo, siendo perfecta para fechas, categorías o información contextual.

Enlaces especializados (.card-link):

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Tutorial de Bootstrap</h5>
    <p class="card-text">
      Aprende a crear interfaces responsivas y modernas con 
      Bootstrap 5 desde cero hasta nivel avanzado.
    </p>
    <a href="#" class="card-link">Comenzar Tutorial</a>
    <a href="#" class="card-link">Descargar Recursos</a>
  </div>
</div>

Los enlaces con .card-link mantienen un espaciado consistente entre múltiples enlaces dentro de la misma card, evitando que se agrupen demasiado o se separen excesivamente.

Esta aproximación sistemática al contenido de las cards permite crear componentes ricos y informativos que mantienen la consistencia visual característica de Bootstrap, facilitando la construcción de interfaces profesionales y cohesivas.

Variaciones de diseño y agrupaciones simples

Las cards de Bootstrap ofrecen múltiples opciones de personalización visual que permiten adaptar su apariencia a diferentes contextos y necesidades de diseño. Estas variaciones, combinadas con técnicas de agrupación, facilitan la creación de interfaces cohesivas y organizadas.

Variaciones de color y fondo

Bootstrap proporciona clases utilitarias de color que se integran perfectamente con las cards, permitiendo crear jerarquías visuales claras y destacar contenido importante.

Cards con colores de fondo:

<div class="card bg-primary text-white mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Notificación Importante</h5>
    <p class="card-text">
      Esta información requiere atención inmediata del usuario.
    </p>
  </div>
</div>

<div class="card bg-success text-white mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Proceso Completado</h5>
    <p class="card-text">
      La operación se ha realizado correctamente.
    </p>
  </div>
</div>

Cards con colores de borde:

<div class="card border-warning mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title text-warning">Advertencia</h5>
    <p class="card-text">
      Revisa la configuración antes de continuar.
    </p>
  </div>
</div>

<div class="card border-info mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title text-info">Información</h5>
    <p class="card-text">
      Datos adicionales sobre el proceso actual.
    </p>
  </div>
</div>

Personalización de bordes y sombras

Las utilidades de bordes y sombras permiten crear cards con diferentes niveles de prominencia visual y separación del contenido circundante.

Cards sin bordes:

<div class="card border-0 shadow-sm" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Diseño Minimalista</h5>
    <p class="card-text">
      Card con enfoque limpio y moderno, sin bordes visibles.
    </p>
  </div>
</div>

Cards con diferentes niveles de sombra:

<!-- Sombra suave -->
<div class="card shadow-sm mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Sombra Suave</h5>
    <p class="card-text">Elevación sutil del contenido.</p>
  </div>
</div>

<!-- Sombra media -->
<div class="card shadow mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Sombra Estándar</h5>
    <p class="card-text">Separación visual más marcada.</p>
  </div>
</div>

<!-- Sombra pronunciada -->
<div class="card shadow-lg" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Sombra Intensa</h5>
    <p class="card-text">Máxima prominencia visual.</p>
  </div>
</div>

Alineación de contenido

Las utilidades de alineación de texto permiten controlar la disposición del contenido dentro de las cards, adaptándose a diferentes tipos de información.

Alineación centrada:

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">María Rodríguez</h5>
    <h6 class="card-subtitle mb-2 text-muted">Diseñadora UX</h6>
    <p class="card-text">
      Especialista en experiencia de usuario con 8 años de experiencia.
    </p>
    <button class="btn btn-primary btn-sm">Ver Perfil</button>
  </div>
</div>

Alineación derecha para elementos específicos:

<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">Producto Premium</h5>
    <p class="card-text">
      Descripción detallada del producto con todas sus 
      características y beneficios principales.
    </p>
    <div class="text-end">
      <span class="h4 text-success">€299.99</span>
      <button class="btn btn-success btn-sm ms-2">Comprar</button>
    </div>
  </div>
</div>

Agrupación horizontal simple

La combinación con flexbox permite crear grupos horizontales de cards que mantienen altura uniforme y se adaptan al contenido disponible.

Grupo de cards de productos:

<div class="row">
  <div class="col-md-4 mb-3">
    <div class="card h-100">
      <img src="laptop.jpg" class="card-img-top" alt="Laptop">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Laptop Profesional</h5>
        <p class="card-text">
          Perfecta para trabajo y productividad diaria.
        </p>
        <div class="mt-auto">
          <span class="badge bg-info">Disponible</span>
          <button class="btn btn-primary btn-sm float-end">Ver</button>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-md-4 mb-3">
    <div class="card h-100">
      <img src="tablet.jpg" class="card-img-top" alt="Tablet">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Tablet Creativa</h5>
        <p class="card-text">
          Ideal para diseño gráfico y entretenimiento multimedia.
        </p>
        <div class="mt-auto">
          <span class="badge bg-warning">Últimas unidades</span>
          <button class="btn btn-primary btn-sm float-end">Ver</button>
        </div>
      </div>
    </div>
  </div>
  
  <div class="col-md-4 mb-3">
    <div class="card h-100">
      <img src="smartphone.jpg" class="card-img-top" alt="Smartphone">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Smartphone Avanzado</h5>
        <p class="card-text">
          Tecnología de última generación en tu bolsillo.
        </p>
        <div class="mt-auto">
          <span class="badge bg-success">Oferta</span>
          <button class="btn btn-primary btn-sm float-end">Ver</button>
        </div>
      </div>
    </div>
  </div>
</div>

Agrupación vertical con espaciado

Para listados verticales, las utilidades de espaciado proporcionan separación visual consistente entre cards relacionadas.

Listado de artículos de blog:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      
      <div class="card mb-4">
        <div class="card-body">
          <div class="row align-items-center">
            <div class="col-md-8">
              <h5 class="card-title">Tendencias en Desarrollo Web 2024</h5>
              <p class="card-text">
                Explora las tecnologías y metodologías que están 
                definiendo el futuro del desarrollo web.
              </p>
              <small class="text-muted">Publicado hace 2 días</small>
            </div>
            <div class="col-md-4 text-center">
              <img src="web-trends.jpg" class="img-fluid rounded" alt="Tendencias Web">
            </div>
          </div>
        </div>
      </div>
      
      <div class="card mb-4">
        <div class="card-body">
          <div class="row align-items-center">
            <div class="col-md-8">
              <h5 class="card-title">Optimización de Performance</h5>
              <p class="card-text">
                Técnicas avanzadas para mejorar la velocidad de 
                carga y experiencia del usuario.
              </p>
              <small class="text-muted">Publicado hace 5 días</small>
            </div>
            <div class="col-md-4 text-center">
              <img src="performance.jpg" class="img-fluid rounded" alt="Performance">
            </div>
          </div>
        </div>
      </div>
      
      <div class="card mb-4">
        <div class="card-body">
          <div class="row align-items-center">
            <div class="col-md-8">
              <h5 class="card-title">Accesibilidad en Aplicaciones Web</h5>
              <p class="card-text">
                Cómo crear interfaces inclusivas que funcionen 
                para todos los usuarios.
              </p>
              <small class="text-muted">Publicado hace 1 semana</small>
            </div>
            <div class="col-md-4 text-center">
              <img src="accessibility.jpg" class="img-fluid rounded" alt="Accesibilidad">
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>

Cards en cuadrícula responsiva

Las utilidades de grid permiten crear layouts que se adaptan automáticamente a diferentes tamaños de pantalla, manteniendo la organización visual.

Dashboard de estadísticas:

<div class="row g-3">
  <div class="col-sm-6 col-lg-3">
    <div class="card bg-primary text-white">
      <div class="card-body text-center">
        <h2 class="card-title">1,234</h2>
        <p class="card-text">Usuarios Activos</p>
      </div>
    </div>
  </div>
  
  <div class="col-sm-6 col-lg-3">
    <div class="card bg-success text-white">
      <div class="card-body text-center">
        <h2 class="card-title">567</h2>
        <p class="card-text">Ventas Mensuales</p>
      </div>
    </div>
  </div>
  
  <div class="col-sm-6 col-lg-3">
    <div class="card bg-warning text-white">
      <div class="card-body text-center">
        <h2 class="card-title">89</h2>
        <p class="card-text">Pedidos Pendientes</p>
      </div>
    </div>
  </div>
  
  <div class="col-sm-6 col-lg-3">
    <div class="card bg-info text-white">
      <div class="card-body text-center">
        <h2 class="card-title">€45,678</h2>
        <p class="card-text">Ingresos Totales</p>
      </div>
    </div>
  </div>
</div>

Agrupación con diferentes tamaños

La flexibilidad del sistema de grid permite combinar cards de diferentes tamaños para crear layouts más dinámicos e interesantes visualmente.

Layout mixto de contenido:

<div class="row g-4">
  <!-- Card principal más grande -->
  <div class="col-md-8">
    <div class="card">
      <img src="articulo-principal.jpg" class="card-img-top" alt="Artículo destacado">
      <div class="card-body">
        <h5 class="card-title">Artículo Destacado de la Semana</h5>
        <p class="card-text">
          Un análisis profundo sobre las nuevas tendencias en desarrollo 
          web que están transformando la industria tecnológica actual.
        </p>
        <button class="btn btn-primary">Leer Completo</button>
      </div>
    </div>
  </div>
  
  <!-- Cards secundarias más pequeñas -->
  <div class="col-md-4">
    <div class="card mb-3">
      <div class="card-body">
        <h6 class="card-title">Noticia Rápida</h6>
        <p class="card-text small">
          Actualización menor en las librerías de desarrollo.
        </p>
        <small class="text-muted">Hace 1 hora</small>
      </div>
    </div>
    
    <div class="card mb-3">
      <div class="card-body">
        <h6 class="card-title">Tip del Día</h6>
        <p class="card-text small">
          Usa las utilidades de Bootstrap para ahorrar tiempo.
        </p>
        <small class="text-muted">Hace 3 horas</small>
      </div>
    </div>
    
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Evento Próximo</h6>
        <p class="card-text small">
          Conferencia de desarrollo web el próximo mes.
        </p>
        <small class="text-muted">En 2 semanas</small>
      </div>
    </div>
  </div>
</div>

Estas variaciones y técnicas de agrupación proporcionan las herramientas necesarias para crear interfaces ricas y organizadas, aprovechando al máximo la flexibilidad de las cards de Bootstrap mientras se mantiene la consistencia visual característica del framework.