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 .

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

html

<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.

html

<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

html

<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.

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.

html

<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

html

<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

html

<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

html

<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.

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

html

<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>

Cabeçalho e rodapé

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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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">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

html

<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">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.

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

html

<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.

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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.

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

html

<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

Adicionado na v5.2.0

Defina um background-colorprimeiro plano contrastante colorcom nossos .text-bg-{color}ajudantes . Anteriormente, era necessário emparelhar manualmente sua escolha .text-{color}e .bg-{color}utilitários de estilo, que você ainda pode usar, se preferir.

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.

html

<div class="card text-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-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-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-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-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-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-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-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.

html

<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é

html

<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.

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 cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Ú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 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

html

<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.

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 cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Última atualização 3 minutos atrás

Título do cartão

Última atualização 3 minutos atrás

html

<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.

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.

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.

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.

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.

html

<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.

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.

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.

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.

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.

html

<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.

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.

Título do cartão

Este é um cartão curto.

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.

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.

html

<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.

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 cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.

Última atualização 3 minutos atrás

Título do cartão

Última atualização 3 minutos atrás

html

<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.

CSS

Variáveis

Adicionado na v5.2.0

Como parte da abordagem de variáveis CSS em evolução do Bootstrap, os cartões agora usam variáveis CSS locais .cardpara personalização aprimorada em tempo real. Os valores das variáveis CSS são definidos por meio do Sass, portanto, a personalização do Sass também é suportada.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Variáveis atrevidas

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$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;

Cartões

Sobre

Exemplo

Título do cartão

Tipos de conteúdo

Corpo

Títulos, texto e links

Título do cartão

Legenda do cartão

Imagens

Listar grupos

Pia da cozinha

Título do cartão

Cabeçalho e rodapé

Tratamento de título especial

Destaque

Tratamento de título especial

Tratamento de título especial

Dimensionamento

Usando marcação de grade

Tratamento de título especial

Tratamento de título especial

Usando utilitários

Título do cartão

Título do cartão

Usando CSS personalizado

Tratamento de título especial

Alinhamento de texto

Tratamento de título especial

Tratamento de título especial

Tratamento de título especial

Navegação

Tratamento de título especial

Tratamento de título especial

Imagens

Limites de imagem

Título do cartão

Título do cartão

Sobreposições de imagem

Título do cartão

Horizontal

Título do cartão

Estilos de cartão

Fundo e cor

Título do cartão principal

Título do cartão secundário

Título do cartão de sucesso

Título do cartão de perigo

Título do cartão de aviso

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

Título do cartão leve

Título do cartão escuro

Transmitindo significado às tecnologias assistivas

Fronteira

Título do cartão principal

Título do cartão secundário

Título do cartão de sucesso

Título do cartão de perigo

Título do cartão de aviso

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

Título do cartão leve

Título do cartão escuro

Utilitários de mixins

Título do cartão de sucesso

Layout do cartão

Grupos de cartões

Título do cartão

Título do cartão

Título do cartão

Título do cartão

Título do cartão

Título do cartão

Cartões de grade

Título do cartão

Título do cartão

Título do cartão

Título do cartão

Título do cartão

Título do cartão

Título do cartão

Variáveis atrevidas