Bootstrap: Cartão

Q: P: A largura do cartão é fixa ou adaptável?

R: O cartão é width: 100% por padrão (preenche o contêiner pai). Você pode usar style="width: 18rem;" para fixar a largura, ou colocá-lo dentro de uma coluna de grade para se adaptar automaticamente.

Q: P: Como um card-group é exibido em telas pequenas?

R: Em telas pequenas, os cartões em um card-group empilham verticalmente, cada cartão ocupando a largura total do contêiner, mantendo altura igual. Se a altura igual não for necessária, o uso de uma grade row-cols-* é recomendado.

Q: P: Posso colocar um grupo de lista completo dentro de um cartão?

R: Sim. Você pode colocar diretamente list-group list-group-flush dentro do cartão. Nesse caso, o grupo de lista ficará rente ao padding do cartão, criando um efeito visual unificado.

Última atualização: 2026-08-26

1. Introdução a esta Lição

(1) Pré-requisitos

Lição 09: Botões e Grupos de Botões

(2) 🎯 O que você vai aprender

Construir a estrutura básica de um cartão (imagem, corpo, título, texto)
Usar card-header e card-footer para adicionar topo e base
Usar card-img-overlay para sobreposição de texto em imagem
Usar text-bg-* e border-* para controlar cores do cartão
Usar card-group e o sistema de grade para criar layouts de cartões

(3) O Problema

A página de listagem de produtos do Bob precisa exibir 6 produtos—cada um com imagem, nome, preço e um botão "Adicionar ao Carrinho". Usando o componente card do Bootstrap e o sistema de grade, isso pode ser feito em pouco mais de dez linhas de código.

(4) A Solução

O card é o contêiner de conteúdo mais central do Bootstrap 5. Ele pode combinar imagens, texto, botões e listas em uma única unidade de conteúdo independente. É amplamente usado para exibição de produtos, prévias de artigos e cartões de perfil de usuário.

(5) Os Benefícios

Usando o componente card do Bootstrap junto com o sistema de grade, você pode construir uma página de exibição de produtos profissional e esteticamente agradável em pouco mais de dez linhas de código.

2. Estrutura Básica de Cartão

▶ Exemplo: Cartão Básico

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Cartão</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">

    <div class="card" style="width: 18rem;">
      <img src="https://via.placeholder.com/286x180/0d6efd/fff" class="card-img-top" alt="Placeholder">
      <div class="card-body">
        <h5 class="card-title">Nome do Produto</h5>
        <h6 class="card-subtitle mb-2 text-body-secondary">$29.99</h6>
        <p class="card-text">Um ótimo produto que resolve problemas reais de usuários do dia a dia.</p>
        <a href="#" class="btn btn-primary">Adicionar ao Carrinho</a>
      </div>
    </div>

    <hr>

    <div class="card">
      <div class="card-header">Destaque</div>
      <div class="card-body">
        <h5 class="card-title">Oferta Especial</h5>
        <p class="card-text">Com texto de apoio abaixo como introdução natural.</p>
        <a href="#" class="btn btn-success">Resgatar Oferta</a>
      </div>
      <div class="card-footer text-body-secondary">Faltam 2 dias</div>
    </div>

    <hr>

    <div class="card" style="width: 18rem;">
      <div class="card-header">Notificações</div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Nova mensagem de Alice</li>
        <li class="list-group-item">Atualização do servidor concluída</li>
        <li class="list-group-item">Pagamento recebido: $120</li>
      </ul>
    </div>

  </div>
</body>
</html>

▶ Experimente

3. Estrutura do Cartão Explicada

Elemento	classe	Descrição
Contêiner	`card`	Declara o componente card, fornecendo bordas, cantos arredondados e sombra.
Imagem	`card-img-top`	Imagem superior do cartão (largura responsiva).
Corpo	`card-body`	Contêiner com padding para colocar texto e botões.
Título	`card-title`	Título do cartão (tamanho de fonte h5).
Subtítulo	`card-subtitle`	Texto secundário abaixo do título.
Texto	`card-text`	Parágrafo do corpo (vem com margin-bottom).
Link	`card-link`	Um link dentro do cartão (texto azul).
Cabeçalho	`card-header`	Barra superior do cartão.
Rodapé	`card-footer`	Barra inferior do cartão.
Sobreposição de Imagem	`card-img-overlay`	Texto sobreposto sobre uma imagem.

(1) Sobreposição de Imagem

HTML

<div class="card text-white">
  <img src="https://via.placeholder.com/400x200/198754/fff" class="card-img" alt="Fundo">
  <div class="card-img-overlay">
    <h5 class="card-title">Título de Sobreposição</h5>
    <p class="card-text">O texto é colocado sobre a imagem.</p>
  </div>
</div>

▶ Experimente

4. Cores e Fundos do Cartão

HTML

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabeçalho</div>
  <div class="card-body">
    <h5 class="card-title">Cartão primário</h5>
    <p class="card-text">Cor de fundo total usando a classe text-bg-*.</p>
  </div>
</div>

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Borda de perigo</div>
  <div class="card-body">
    <h5 class="card-title">Cartão apenas com borda</h5>
    <p class="card-text">Apenas a borda recebe a cor.</p>
  </div>
</div>

▶ Experimente

classe	Efeito
`text-bg-primary` / `text-bg-dark`	Fundo de cor total + texto branco
`bg-light` / `bg-dark`	Cor de fundo personalizada
`border-primary` / `border-danger`	Apenas a cor da borda

5. Cartão Horizontal

HTML

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/200x200/0d6efd/fff" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Cartão Horizontal</h5>
        <p class="card-text">Este cartão usa row + col para colocar imagem e texto lado a lado.</p>
        <p class="card-text"><small class="text-body-secondary">Atualizado pela última vez há 3 min</small></p>
      </div>
    </div>
  </div>
</div>

▶ Experimente

6. Grupo de Cartões

HTML

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Cartão 1</h5>
      <p class="card-text">Este cartão tem menos conteúdo.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/198754/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Cartão 2</h5>
      <p class="card-text">Este cartão tem mais conteúdo. Os cartões combinam altura automaticamente.</p>
      <p class="card-text">Parágrafo adicional para mostrar a correspondência de altura.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Cartão 3</h5>
      <p class="card-text">Conteúdo curto novamente.</p>
    </div>
  </div>
</div>

▶ Experimente

(1) Grade de Cartões (Recomendado)

HTML

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/0d6efd/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Cartão 1</h5>
        <p class="card-text">Conteúdo aqui.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x180/dc3545/fff" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Cartão 2</h5>
        <p class="card-text">Mais conteúdo aqui.</p>
      </div>
    </div>
  </div>
</div>

▶ Experimente

Método de Layout	Características	Caso de Uso
`card-group`	Sem gap, altura igual	Páginas de detalhe, recursos lado a lado
`row-cols-*` + `h-100`	Com gap, altura igual	Listas de produtos/artigos
`row` + `col-*` padrão	Altura desigual	Exibição de informações

7. Mais Exemplos de Cartões

▶ Exemplo: Cartão de Produto de E-commerce

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cartão de Produto de E-commerce</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff" class="card-img-top" alt="Produto">
          <div class="card-body">
            <h5 class="card-title">Fones Sem Fio</h5>
            <p class="card-text text-muted">Cancelamento de ruído, bateria de 30h.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$79.99</span>
              <span class="badge bg-success rounded-pill">Em Estoque</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Adicionar ao Carrinho</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/198754/fff" class="card-img-top" alt="Produto">
          <div class="card-body">
            <h5 class="card-title">Smartwatch</h5>
            <p class="card-text text-muted">Rastreador de fitness com monitor de batimentos.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$199.99</span>
              <span class="badge bg-warning rounded-pill">Estoque Baixo</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-primary w-100">Adicionar ao Carrinho</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <img src="https://via.placeholder.com/300x200/dc3545/fff" class="card-img-top" alt="Produto">
          <div class="card-body">
            <h5 class="card-title">Caixa Bluetooth</h5>
            <p class="card-text text-muted">Portátil, à prova d'água, 12h de reprodução.</p>
            <div class="d-flex justify-content-between align-items-center">
              <span class="h5 mb-0">$49.99</span>
              <span class="badge bg-danger rounded-pill">Esgotado</span>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button class="btn btn-secondary w-100" disabled>Fora de Estoque</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

▶ Exemplo: Cartão de Perfil de Usuário (Sobreposição de Imagem)

HTML

<div class="card text-white border-0" style="width: 20rem;">
  <img src="https://via.placeholder.com/320x200/6f42c1/fff" class="card-img rounded-3" alt="Capa">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title">Alice Chen</h5>
    <p class="card-text">Designer de UI Sênior na TechCorp</p>
    <div>
      <span class="badge bg-primary rounded-pill">12 Projetos</span>
      <span class="badge bg-success rounded-pill">98% Avaliação</span>
    </div>
  </div>
</div>

▶ Experimente

▶ Exemplo: Tabela de Preços com Grupo de Cartões

HTML

<div class="card-group text-center">
  <div class="card border-primary">
    <div class="card-header bg-primary text-white">Básico</div>
    <div class="card-body">
      <h3 class="card-title">$9<span class="text-muted fs-6">/mês</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>10 GB de Armazenamento</li>
        <li>1 Usuário</li>
        <li>Suporte por E-mail</li>
      </ul>
      <button class="btn btn-outline-primary">Escolher Plano</button>
    </div>
  </div>
  <div class="card border-success">
    <div class="card-header bg-success text-white">Pro</div>
    <div class="card-body">
      <h3 class="card-title">$29<span class="text-muted fs-6">/mês</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>100 GB de Armazenamento</li>
        <li>5 Usuários</li>
        <li>Suporte Prioritário</li>
      </ul>
      <button class="btn btn-success">Escolher Plano</button>
    </div>
  </div>
  <div class="card border-warning">
    <div class="card-header bg-warning text-white">Empresarial</div>
    <div class="card-body">
      <h3 class="card-title">$99<span class="text-muted fs-6">/mês</span></h3>
      <ul class="list-unstyled mt-3 mb-4">
        <li>Armazenamento Ilimitado</li>
        <li>Usuários Ilimitados</li>
        <li>Suporte 24/7</li>
      </ul>
      <button class="btn btn-warning">Escolher Plano</button>
    </div>
  </div>
</div>

▶ Experimente

▶ Exemplo: Cartão de Ícone Horizontal

HTML

<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-primary">🔒</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Pagamento Seguro</h5>
        <p class="card-text">Todas as transações são criptografadas com segurança SSL de 256 bits.</p>
      </div>
    </div>
  </div>
</div>
<div class="card mb-3" style="max-width: 500px;">
  <div class="row g-0 align-items-center">
    <div class="col-md-3 text-center p-3">
      <div class="display-6 text-success">🚚</div>
    </div>
    <div class="col-md-9">
      <div class="card-body">
        <h5 class="card-title">Frete Grátis</h5>
        <p class="card-text">Entrega grátis em pedidos acima de $50, chega em 3-5 dias.</p>
      </div>
    </div>
  </div>
</div>

▶ Experimente

(1) Estrutura do Componente Cartão

flowchart TD
    A[contêiner card] --> B[card-img-top<br/>Imagem]
    A --> C[card-body Corpo]
    A --> D[card-header<br/>Cabeçalho]
    A --> E[card-footer<br/>Rodapé]
    C --> F[card-title Título]
    C --> G[card-subtitle Subtítulo]
    C --> H[card-text Texto]
    C --> I[card-link Link]
    A --> J[card-img-overlay<br/>Texto de Sobreposição]
    A --> K[list-group Grupo de Lista]

Variante de Cartão	classe	Descrição do Efeito
Fundo de cor total	`text-bg-primary/dark`	Fundo e texto mudam de cor juntos
Apenas borda	`border-primary/danger`	Fundo branco mantido, borda colorida
Fundo transparente	`bg-transparent`	Sem cor de fundo, adequado para modo escuro
Sem borda	`border-0`	Remove completamente a borda

Método de Layout	Gap	Altura Igual	Cenário Adequado
`card-group`	Não	Sim	Páginas de detalhe, comparação de recursos
`row-cols-*` + `h-100`	Sim	Sim	Listas de produtos, blogs
`row-cols-*` sem `h-100`	Sim	Não	Conteúdo com alturas variadas

Conteúdo Combinado	classe	Casos de Uso Comuns
Imagem + Texto + Botão	`card-img-top` + `card-body`	Exibição de produtos
Cabeçalho + Corpo + Rodapé	`card-header` + `card-body` + `card-footer`	Mensagens, anúncios
Sobreposição de Imagem	`card-img-overlay`	Capas, banners
Ícone + Layout Horizontal	`row g-0` + `col-*`	Listas de recursos, serviços
Grupo de Lista	`list-group list-group-flush`	Notificações, menus

❓ Perguntas Frequentes

📖 Resumo

Estrutura do cartão: card > card-img-top + card-body (card-title / card-text / card-link)
card-header / card-footer adicionam barras superior/inferior, card-img-overlay para sobreposição de texto em imagem
text-bg-* para cartões de fundo de cor total, border-* para colorir apenas a borda
card-group para altura igual sem gap, row-cols-* + h-100 para grade com gap e altura igual

📝 Exercícios

⭐ Crie uma grade de cartões de produto: 1 coluna no mobile, 2 no tablet, 3 no desktop. Cada cartão deve ter imagem + título + preço + descrição + botão. Use mt-auto para fixar o botão na base.
⭐⭐ Crie um cartão de perfil de usuário: avatar à esquerda (imagem horizontal) + nome à direita + biografia + links sociais. O cartão deve ter uma borda azul border-primary.
⭐⭐⭐ Use card-group para criar três cartões de introdução de recursos, cada um com área de ícone + título + descrição. Os três cartões devem ter altura igual automaticamente.

Lição Anterior: Botões e Grupos de Botões · Próxima Lição: Grupos de Lista e Distintivos

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós