Cartão Bootstrap 5

Cartão

Os cartões do Bootstrap 5 são caixas com bordas, com some margens ao redor do conteúdo. Inclui opções como cabeçalho, rodapé, conteúdo, cores, etc.

cartão básico

Um cartão básico é feito com .card Classe criada, o conteúdo dentro do cartão tem um .card-body Classe:

Exemplo

<div class="card">
  <div class="card-body">Cartão básico</div>
</div>

Experimente pessoalmente

Cabeçalho e rodapé

.card-header Adicione título ao cartão com a classe:.card-footer Adicione rodapé ao cartão com a classe:

Exemplo

<div class="card">
  <div class="card-header">Cabeçalho</div>
  <div class="card-body">Conteúdo</div>
  <div class="card-footer">Rodapé</div>
</div>

Experimente pessoalmente

Cartão de contexto

Para adicionar uma cor de fundo ao cartão, use as classes de contexto:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Exemplo

Experimente pessoalmente

título, texto e link

Use .card-title Adicione o título do cartão a qualquer elemento de título. Se <p> o elemento é .card-body O último elemento filho (ou o único elemento filho), então .card-text Classe usada para remover <p> Margem inferior do elemento..card-link Adicionar efeito azul e hover para qualquer link de classe.

Exemplo

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Título do cartão</h4>
    <p class="card-text">Alguns textos de exemplo. Alguns textos de exemplo.</p>
    <a href="#" class="card-link">Link de cartão</a>
    <a href="#" class="card-link">Outro link</a>
  </div>
</div>

Experimente pessoalmente

imagem do cartão

Converter .card-img-top ou .card-img-bottom Adicionar a <img>pode colocar a imagem no topo ou na parte inferior do cartão.

Observe que adicionamos a imagem fora da .card-body para cruzar toda a largura:

Exemplo

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Imagem do cartão">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates é um programador e engenheiro. Alguns textos de exemplo. Alguns textos de exemplo.</p>
    <a href="#" class="btn btn-primary">Ver perfil pessoal</a>
  </div>
</div>

Experimente pessoalmente

Superposição de imagem de cartão

Converter a imagem em fundo de cartão e usar .card-img-overlay Adicionar texto no topo da imagem:

Exemplo

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Imagem do cartão">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Alguns textos de exemplo. Alguns textos de exemplo.</p>
    <a href="#" class="btn btn-primary">Ver perfil pessoal</a>
  </div>
</div>

Experimente pessoalmente