O componente Card do Bootstrap é um contêiner flexível que pode ser utilizado para exibir diferentes tipos de conteúdo de forma estruturada. É ideal para apresentar artigos, perfis de usuários, produtos e muito mais, oferecendo funcionalidades integradas para organizar e apresentar o conteúdo de maneira eficiente.

Principais Características

• Header e Footer: Os cards podem ter seções de cabeçalho e rodapé para fornecer contexto adicional ou ações relacionadas ao conteúdo;
• Imagens: Os cards suportam a inclusão de imagens, permitindo que desenvolvedores exibam conteúdo visual junto com informações textuais;
• Conteúdo de Texto: Conteúdos textuais como títulos, descrições e informações adicionais podem ser incluídos no corpo do card;
• Botões: O componente card do Bootstrap permite a integração de botões para ações como ler mais, adicionar ao carrinho ou curtir o conteúdo;
• Variedade de Estilos: O Bootstrap oferece diversos estilos e layouts de cards para atender diferentes necessidades de design, incluindo cards com fundos, bordas e sombras.

Classes de Utilização

• card: Classe base para criar um contêiner de card;
• card-header: Adiciona estilização para uma seção de cabeçalho dentro do card;
• card-footer: Adiciona estilização para uma seção de rodapé dentro do card;
• card-img-top: Posiciona uma imagem no topo do card;
• card-body: Contêiner para o conteúdo principal do card, como texto e botões;
• card-title: Estiliza o título do conteúdo do card;
• card-text: Estiliza o conteúdo textual do card;
• btn: Aplica estilos de botão do Bootstrap aos botões dentro do card;
• btn-primary, btn-secondary, etc.: Aplicam estilos de cor específicos aos botões dentro do card.

Exemplo 1: Cartão Básico

Exemplo 2: Cartão com Cabeçalho e Rodapé

Exemplo 3: Cartão com Imagem