Cards
O card é uma caixa de conteúdo que pode incluir textos, imagens, botões e qualquer outro elemento HTML.
Card Básico
<div class="card">
<div class="card-body">
Este é um card simples.
</div>
</div>
Card com Título e Texto
<div class="card">
<div class="card-body">
<h5 class="card-title">Título do Card</h5>
<p class="card-text">Este é um texto dentro do card.</p>
<a href="#" class="btn btn-primary">Ação</a>
</div>
</div>
Card com Cabeçalho e Rodapé
htmlCopiarEditar<div class="card">
<div class="card-header">
Cabeçalho
</div>
<div class="card-body">
<h5 class="card-title">Título</h5>
<p class="card-text">Conteúdo do card.</p>
</div>
<div class="card-footer">
Rodapé
</div>
</div>
Card com Imagem
<div class="card" style="width: 18rem;">
<img src="imagem.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Título</h5>
<p class="card-text">Descrição breve do conteúdo.</p>
<a href="#" class="btn btn-primary">Ação</a>
</div>
</div>
Agrupamento de Cards
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Conteúdo.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Conteúdo.</p>
</div>
</div>
</div>
List Groups
Os list groups são listas estilizadas, ótimas para navegação, exibição de itens, passos ou informações ordenadas.
Lista Simples
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
Lista com Itens Ativos e Desabilitados
<ul class="list-group">
<li class="list-group-item active">Item ativo</li>
<li class="list-group-item">Item normal</li>
<li class="list-group-item disabled">Item desabilitado</li>
</ul>
Lista com Links ou Botões
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Link ativo</a>
<a href="#" class="list-group-item list-group-item-action">Outro link</a>
</div>
Lista com Cores Contextuais
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primário</li>
<li class="list-group-item list-group-item-success">Sucesso</li>
<li class="list-group-item list-group-item-danger">Perigo</li>
</ul>
Lista Dentro de Cards
Os list groups podem ser incorporados diretamente dentro de cards para compor interfaces mais robustas.
<div class="card" style="width: 18rem;">
<div class="card-header">
Tarefas
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Tarefa 1</li>
<li class="list-group-item">Tarefa 2</li>
<li class="list-group-item">Tarefa 3</li>
</ul>
</div>
Esses dois componentes são extremamente usados para exibir conteúdo estruturado, informações dinâmicas e criar interfaces que combinam beleza, funcionalidade e organização.