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.
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 margin
por 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<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.
<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-title
a uma <h*>
tag. Da mesma forma, os links são adicionados e colocados próximos uns dos outros adicionando .card-link
a uma <a>
tag.
As legendas são usadas adicionando um .card-subtitle
a uma <h*>
tag. Se os .card-title
e os .card-subtitle
itens forem colocados em um .card-body
item, 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-top
coloca uma imagem na parte superior do cartão. Com .card-text
, o texto pode ser adicionado ao cartão. O texto dentro .card-text
també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.
<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>
- 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
<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
<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.
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-header
Os 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>
Uma citação bem conhecida, contida em um elemento blockquote.
<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>
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">
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 width
iní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 lugarTratamento 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ãoTí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 lugarTratamento de título especial
Com o texto de apoio abaixo como uma introdução natural ao conteúdo adicional.
Ir a algum lugarTratamento 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>
Navegação
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">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">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
<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.
<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>
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-0
e usamos .col-md-*
classes para tornar o cartão horizontal no ponto de md
interrupçã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
<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.
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.
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.
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.
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.
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.
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.
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.
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-hidden
classe.
Fronteira
Use utilitários de borda para alterar apenas o formato border-color
de um cartão. Observe que você pode colocar .text-{color}
classes no pai .card
ou em um subconjunto do conteúdo do cartão, conforme mostrado abaixo.
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.
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.
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.
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.
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.
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.
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.
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-color
com .bg-transparent
.
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.
<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 sm
interrupçã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
<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.
Título do cartão
Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.
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.
<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-cols
classes para controlar quantas colunas de grade (envolvidas em seus cartões) você mostra por linha. Por exemplo, aqui está .row-cols-1
colocando os cartões em uma coluna e .row-cols-md-2
dividindo 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.
<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-3
e 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.
<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-100
aos 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.
<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.
Título do cartão
Este cartão tem um texto de apoio abaixo como uma introdução natural para conteúdo adicional.
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.
<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 v4
nó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-color: rgba($black, .125);
$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;