Ir para o conteúdo principal Pular para a navegação de documentos
in English

Cartões

Os cartões do Bootstrap fornecem um contêiner de conteúdo flexível e extensível com várias variantes e opções.

Nesta página

Sobre

Um cartão é um contêiner de conteúdo flexível e extensível. Inclui opções para cabeçalhos e rodapés, uma ampla variedade de conteúdo, cores de fundo contextuais e opções de exibição poderosas. Se você estiver familiarizado com o Bootstrap 3, os cartões substituem nossos antigos painéis, poços e miniaturas. Funcionalidade semelhante a esses componentes está disponível como classes modificadoras para cartões.

Exemplo

Os cartões são construídos com o mínimo de marcação e estilos possível, mas ainda conseguem oferecer muito controle e personalização. Construído com flexbox, eles oferecem fácil alinhamento e combinam bem com outros componentes do Bootstrap. Eles não têm marginpor padrão, então use utilitários de espaçamento conforme necessário.

Abaixo está um exemplo de um cartão básico com conteúdo misto e largura fixa. Os cartões não têm largura fixa para iniciar, então eles naturalmente preencherão toda a largura de seu elemento pai. Isso é facilmente personalizado com nossas várias opções de dimensionamento .

Placeholder Image cap
Título do cartão

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Ir a algum lugar 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tipos de conteúdo

Os cartões suportam uma ampla variedade de conteúdo, incluindo imagens, texto, grupos de listas, links e muito mais. Veja abaixo exemplos do que é compatível.

Corpo

O bloco de construção de um cartão é o .card-body. Use-o sempre que precisar de uma seção acolchoada em um cartão.

Este é um texto dentro de um corpo de cartão. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Títulos, texto e links

Os títulos dos cartões são usados ​​adicionando .card-titlea uma <h*>tag. Da mesma forma, os links são adicionados e colocados próximos uns dos outros adicionando .card-linka uma <a>tag.

As legendas são usadas adicionando um .card-subtitlea uma <h*>tag. Se os .card-titlee os .card-subtitleitens forem colocados em um .card-bodyitem, o título e o subtítulo do cartão serão alinhados corretamente.

Título do cartão
Legenda do cartão

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Link do cartão Outro link 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Imagens

.card-img-topcoloca uma imagem na parte superior do cartão. Com .card-text, o texto pode ser adicionado ao cartão. O texto dentro .card-texttambém pode ser estilizado com as tags HTML padrão.

Placeholder Image cap

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Listar grupos

Crie listas de conteúdo em um cartão com um grupo de listas niveladas.

  • Um item
  • Um segundo item
  • Um terceiro elemento
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Destaque
  • Um item
  • Um segundo item
  • Um terceiro elemento
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Um item
  • Um segundo item
  • Um terceiro elemento
Rodapé do cartão 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Pia da cozinha

Misture e combine vários tipos de conteúdo para criar o cartão que você precisa ou jogue tudo lá. Abaixo são mostrados estilos de imagem, blocos, estilos de texto e um grupo de listas, todos agrupados em um cartão de largura fixa.

Placeholder Image cap
Título do cartão

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

  • Um item
  • Um segundo item
  • Um terceiro elemento
Link do cartão Outro link 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Adicione um cabeçalho e/ou rodapé opcional em um cartão.

Destaque
Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-headerOs cabeçalhos de cartão podem ser estilizados adicionando <h*>elementos.

Destaque
Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Citar

Uma citação bem conhecida, contida em um elemento blockquote.

Alguém famoso em Source Title 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Destaque
Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar
2 dias atrás 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Dimensionamento

Os cartões não assumem um widthinício específico, portanto, terão 100% de largura, salvo indicação em contrário. Você pode alterar isso conforme necessário com CSS personalizado, classes de grade, mixins de grade Sass ou utilitários.

Usando marcação de grade

Usando a grade, enrole os cartões em colunas e linhas conforme necessário.

Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar
Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Usando utilitários

Use nosso punhado de utilitários de dimensionamento disponíveis para definir rapidamente a largura de um cartão.

Título do cartão

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Botão
Título do cartão

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Botão 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Usando CSS personalizado

Use CSS personalizado em suas folhas de estilo ou como estilos embutidos para definir uma largura.

Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Alinhamento de texto

Você pode alterar rapidamente o alinhamento de texto de qualquer cartão - em sua totalidade ou em partes específicas - com nossas classes de alinhamento de texto .

Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar
Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar
Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Adicione alguma navegação ao cabeçalho (ou bloco) de um cartão com os componentes nav do Bootstrap .

Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Tratamento de título especial

Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.

Ir a algum lugar 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Imagens

Os cartões incluem algumas opções para trabalhar com imagens. Escolha entre anexar “caps de imagem” em cada extremidade de um cartão, sobrepor imagens com o conteúdo do cartão ou simplesmente incorporar a imagem em um cartão.

Limites de imagem

Semelhante aos cabeçalhos e rodapés, os cartões podem incluir "caps de imagem" superior e inferior - imagens na parte superior ou inferior de um cartão.

Placeholder Image cap
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Última atualização 3 minutos atrás

Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Última atualização 3 minutos atrás

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Sobreposições de imagem

Transforme uma imagem em um plano de fundo do cartão e sobreponha o texto do seu cartão. Dependendo da imagem, você pode ou não precisar de estilos ou utilitários adicionais.

Placeholder Card image
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Última atualização 3 minutos atrás

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
Observe que o conteúdo não deve ser maior que a altura da imagem. Se o conteúdo for maior que a imagem, o conteúdo será exibido fora da imagem.

Horizontal

Usando uma combinação de classes de grade e utilidade, os cartões podem ser feitos horizontalmente de uma maneira responsiva e amigável para dispositivos móveis. No exemplo abaixo, removemos as calhas da grade .g-0e usamos .col-md-*classes para tornar o cartão horizontal no ponto de mdinterrupção. Outros ajustes podem ser necessários dependendo do conteúdo do seu cartão.

Placeholder Image
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Última atualização 3 minutos atrás

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Estilos de cartão

Os cartões incluem várias opções para personalizar seus planos de fundo, bordas e cores.

Fundo e cor

Use utilitários de cor de texto e plano de fundo para alterar a aparência de um cartão.

Cabeçalho
Título do cartão principal

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão secundário

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de sucesso

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de perigo

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de aviso

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de informações

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão leve

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão escuro

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Transmitindo significado às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .visually-hiddenclasse.

Fronteira

Use utilitários de borda para alterar apenas o formato border-colorde um cartão. Observe que você pode colocar .text-{color}classes no pai .cardou em um subconjunto do conteúdo do cartão, conforme mostrado abaixo.

Cabeçalho
Título do cartão principal

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão secundário

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de sucesso

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de perigo

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de aviso

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão de informações

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão leve

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Cabeçalho
Título do cartão escuro

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Utilitários de mixins

Você também pode alterar as bordas do cabeçalho e rodapé do cartão conforme necessário e até removê-las background-colorcom .bg-transparent.

Cabeçalho
Título do cartão de sucesso

Algum texto de exemplo rápido para construir no título do cartão e compor a maior parte do conteúdo do cartão.

Rodapé 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Layout do cartão

Além de estilizar o conteúdo dos cartões, o Bootstrap inclui algumas opções para o layout de séries de cartões. Por enquanto, essas opções de layout ainda não são responsivas .

Grupos de cartões

Use grupos de cartões para renderizar cartões como um único elemento anexado com colunas de largura e altura iguais. Os grupos de cartões começam empilhados e display: flex;são anexados com dimensões uniformes começando no ponto de sminterrupção.

Placeholder Image cap
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Última atualização 3 minutos atrás

Placeholder Image cap
Título do cartão

Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Última atualização 3 minutos atrás

Placeholder Image cap
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este cartão tem um conteúdo ainda mais longo do que o primeiro para mostrar essa ação de altura igual.

Última atualização 3 minutos atrás

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Ao usar grupos de cartões com rodapés, seu conteúdo será alinhado automaticamente.

Placeholder Image cap
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Última atualização 3 minutos atrás
Placeholder Image cap
Título do cartão

Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Última atualização 3 minutos atrás
Placeholder Image cap
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este cartão tem um conteúdo ainda mais longo do que o primeiro para mostrar essa ação de altura igual.

Última atualização 3 minutos atrás 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Cartões de grade

Use o sistema de grade Bootstrap e suas .row-colsclasses para controlar quantas colunas de grade (envolvidas em seus cartões) você mostra por linha. Por exemplo, aqui está .row-cols-1colocando os cartões em uma coluna e .row-cols-md-2dividindo quatro cartões com a mesma largura em várias linhas, do ponto de interrupção médio para cima.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Mude para .row-cols-3e você verá o quarto cartão embrulhado.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Quando você precisar de altura igual, adicione .h-100aos cartões. Se você quiser alturas iguais por padrão, você pode definir $card-height: 100%em Sass.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Placeholder Image cap
Título do cartão

Este é um cartão curto.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Placeholder Image cap
Título do cartão

Este é um cartão mais longo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Assim como nos grupos de cartões, os rodapés dos cartões serão alinhados automaticamente.

Placeholder Image cap
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este conteúdo é um pouco mais longo.

Última atualização 3 minutos atrás
Placeholder Image cap
Título do cartão

Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Última atualização 3 minutos atrás
Placeholder Image cap
Título do cartão

Este é um cartão mais amplo com texto de apoio abaixo como uma introdução natural para conteúdo adicional. Este cartão tem um conteúdo ainda mais longo do que o primeiro para mostrar essa ação de altura igual.

Última atualização 3 minutos atrás 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Alvenaria

Em v4nós usamos uma técnica somente CSS para imitar o comportamento de colunas do tipo Masonry , mas essa técnica veio com muitos efeitos colaterais desagradáveis . Se você quiser ter esse tipo de layout no v5, basta usar o plugin Masonry. A Maçonaria não está incluída no Bootstrap , mas fizemos um exemplo de demonstração para ajudá-lo a começar.

Sass

Variáveis

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;