Bootstrap 4 Cartões
Cartões
Um cartão no Bootstrap 4 é uma caixa com bordas com algum preenchimento em torno de seu conteúdo. Inclui opções para cabeçalhos, rodapés, conteúdo, cores, etc.
John Doe
Algum texto de exemplo algum texto de exemplo. John Doe é arquiteto e engenheiro
Ver perfilCartão Básico
Um cartão básico é criado com a .cardclasse e o conteúdo dentro do cartão tem uma .card-bodyclasse:
Exemplo
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Se você estiver familiarizado com o Bootstrap 3, os cartões substituem painéis, poços e miniaturas antigos.
Cabeçalho e rodapé
A .card-headerclasse adiciona um cabeçalho ao cartão e a .card-footerclasse adiciona um rodapé ao cartão:
Exemplo
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Cartões contextuais
Para adicionar uma cor de fundo ao cartão, use classes contextuais ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondarye .bg-dark..bg-light
Exemplo
Títulos, texto e links
Use .card-titlepara adicionar títulos de cartão a qualquer elemento de título. A .card-textclasse é usada para remover as margens inferiores de um elemento <p> se for o último filho (ou o único) dentro .card-bodyde . A .card-linkclasse adiciona uma cor azul a qualquer link e um efeito de foco.
Exemplo
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Imagens de cartão
John Doe
Algum texto de exemplo algum texto de exemplo. John Doe é arquiteto e engenheiro
Ver perfil
Adicione .card-img-topou .card-img-bottoma um
<img>para colocar a imagem na parte superior ou inferior dentro do cartão. Observe que adicionamos a imagem fora do .card-bodypara abranger toda a largura:
Exemplo
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Link estendido
Adicione a .stretched-linkturma a um link dentro do cartão e isso fará com que todo o cartão seja clicável e passe o mouse (o cartão funcionará como um link):
John Doe
Algum texto de exemplo algum texto de exemplo. John Doe é arquiteto e engenheiro
Ver perfilExemplo
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Sobreposições de imagem de cartão
Transforme uma imagem em um fundo de cartão e use .card-img-overlay
para adicionar texto em cima da imagem:
Exemplo
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Colunas de cartão
Algum texto dentro do primeiro cartão
Algum texto dentro do segundo cartão
Algum texto dentro do terceiro cartão
Algum texto dentro do quarto cartão
Algum texto dentro do quinto cartão
Algum texto dentro do sexto cartão
A .card-columnsclasse cria uma grade de cartões semelhante a alvenaria (como o pinterest). O layout se ajustará automaticamente à medida que você inserir mais cartões.
Observação: os cartões são exibidos verticalmente em telas pequenas (menos de 576px):
Exemplo
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Baralho de cartas
Algum texto dentro do primeiro cartão
Mais algum texto para aumentar a altura
Mais algum texto para aumentar a altura
Mais algum texto para aumentar a altura
Algum texto dentro do segundo cartão
Algum texto dentro do terceiro cartão
Algum texto dentro do quarto cartão
A .card-deckclasse cria uma grade de cartões com altura e largura iguais . O layout se ajustará automaticamente à medida que você inserir mais cartões.
Observação: os cartões são exibidos verticalmente em telas pequenas (menos de 576px):
Exemplo
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Grupo de cartões
Algum texto dentro do primeiro cartão
Mais algum texto para aumentar a altura
Mais algum texto para aumentar a altura
Mais algum texto para aumentar a altura
Algum texto dentro do segundo cartão
Algum texto dentro do terceiro cartão
Algum texto dentro do quarto cartão
A .card-groupclasse é semelhante a .card-deck. A única diferença é que a .card-groupclasse remove as margens esquerda e direita entre cada cartão.
Nota: Os cartões são exibidos verticalmente em telas pequenas (menos de 576px), COM margem superior e inferior:
Exemplo
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>