El componente Card de Bootstrap es un contenedor flexible que puede utilizarse para mostrar diferentes tipos de contenido de manera estructurada. Es ideal para presentar artículos, perfiles de usuario, productos y más, proporcionando funcionalidades integradas para organizar y presentar el contenido de forma eficaz.

Características principales

• Encabezado y pie de página: Las tarjetas pueden tener secciones de encabezado y pie de página para proporcionar contexto adicional o acciones relacionadas con el contenido;
• Imágenes: Las tarjetas permiten la inclusión de imágenes, lo que permite mostrar contenido visual junto con información textual;
• Contenido de texto: Se puede incluir contenido textual como títulos, descripciones e información adicional dentro del cuerpo de la tarjeta;
• Botones: El componente de tarjeta de Bootstrap permite la integración de botones para acciones como leer más, agregar al carrito o marcar como favorito;
• Variedad de estilos: Bootstrap ofrece varios estilos y diseños de tarjetas para adaptarse a diferentes necesidades de diseño, incluidas tarjetas con fondos, bordes y sombras.

Clases de uso

• card: Clase base para crear un contenedor de tarjeta;
• card-header: Agrega estilos para una sección de encabezado dentro de la tarjeta;
• card-footer: Agrega estilos para una sección de pie de página dentro de la tarjeta;
• card-img-top: Coloca una imagen en la parte superior de la tarjeta;
• card-body: Contenedor para el contenido principal de la tarjeta, como texto y botones;
• card-title: Da estilo al título del contenido de la tarjeta;
• card-text: Da estilo al contenido de texto de la tarjeta;
• btn: Aplica estilos de botón de Bootstrap a los botones dentro de la tarjeta;
• btn-primary, btn-secondary, etc.: Aplican estilos de color específicos a los botones dentro de la tarjeta.

Ejemplo 1: Tarjeta básica

Ejemplo 2: Tarjeta con encabezado y pie de página

Ejemplo 3: Tarjeta con imagen