Os cards do Bootstrap são uma ferramenta essencial para organizar e apresentar conteúdo em projetos web. Eles oferecem uma maneira simples e versátil de criar layouts visualmente atraentes que se ajustam perfeitamente a diferentes dispositivos. Até o final deste artigo, você saberá como usar os componentes de card do Bootstrap de forma eficaz em seus projetos.
Por que Escolher o Bootstrap?
O Bootstrap continua sendo um dos frameworks mais populares para a construção de layouts web responsivos e mobile-first. Seus principais benefícios incluem:
- Design Responsivo Rápido e Fácil: Você só precisa de conhecimentos básicos de HTML e CSS para criar layouts deslumbrantes.
- Abordagem Mobile-First: O Bootstrap prioriza a responsividade móvel desde o início.
- Compatibilidade com Navegadores: Funciona perfeitamente em todos os principais navegadores.
- Sistema de Grade Baseado em Flexbox: Simplifica tarefas de alinhamento e espaçamento.
- Componentes Extensivos: Uma ampla gama de elementos reutilizáveis como botões, modais e cards.
A versão mais recente do Bootstrap introduz melhorias significativas, como suporte para Flexbox e o versátil componente de card, que substitui componentes mais antigos como painéis e miniaturas.
Principais Pontos a Serem Considerados
Os cards do Bootstrap são ferramentas versáteis para criar layouts organizados e responsivos. Eles permitem exibir vários tipos de conteúdo, como texto, imagens e multimídia, dentro de um container elegante. Abaixo estão algumas características-chave que os tornam indispensáveis para os desenvolvedores:
- Fácil de Usar: É possível criar rapidamente um card combinando elementos como div class=”card-body”, que define a área de conteúdo, e p class=”card-text”, onde as informações textuais residem.
- Suporte para Vários Tipos de Conteúdo: Adicione um título do card, imagens ou grupos de listas para estruturar seu conteúdo de forma eficaz.
- Responsividade: Utilizando a grade e pontos de quebra do Bootstrap, os cards podem se adaptar a qualquer tamanho de dispositivo, desde móveis até desktops.
- Design Personalizável: Classes de utilidade permitem ajustar a aparência, incluindo cores, bordas e alinhamento de texto.
- Layouts Avançados: Recursos como grupos de cards, decks e layouts de alvenaria permitem um alinhamento e organização perfeitos.
O que é o Componente Card do Bootstrap?
O Bootstrap apresenta um componente de interface do usuário versátil e moderno chamado de cards, que funcionam como containers flexíveis e elegantes para exibir vários tipos de conteúdo. Com um estilo padrão mínimo, os cards do Bootstrap podem ser facilmente aprimorados usando sua ampla variedade de classes de utilidade.
Este componente é construído em cima do Flexbox, permitindo um alinhamento e espaçamento precisos. Os desenvolvedores podem usar as utilidades de espaçamento do Bootstrap para controlar margens e preenchimentos de forma eficaz.
Os cards podem acomodar convenientemente diferentes tipos de conteúdo, como título, subtítulo, corpo do texto e imagens, etc., e seções opcionais de cabeçalho e rodapé. Você também pode incluir diferentes seções (blocos de cartão) para construir diferentes tipos de cartões, dependendo do seu uso.
Principais Classes de Cartão do Bootstrap
Abaixo estão as principais classes de utilidade de cartão do Bootstrap, juntamente com seu propósito:
- card: A classe do contêiner principal que define o componente do cartão.
- card-body: Cria a área de conteúdo principal dentro do cartão.
- card-title: Estiliza o título do cartão, geralmente usado com tags de cabeçalho como <h5>.
- card-text: Usado para conteúdo textual padrão dentro do cartão.
- card-header: Adiciona uma seção de cabeçalho estilizada na parte superior do cartão.
- card-footer: Adiciona uma seção de rodapé estilizada na parte inferior do cartão.
- card-img-top: Coloca uma imagem na parte superior do cartão.
- card-img-bottom: Coloca uma imagem na parte inferior do cartão.
- list-group: Cria um grupo de lista dentro do cartão.
- list-group-item: Estiliza itens individuais no grupo de lista.
- grupo-de-cartões: Agrupa múltiplos cartões juntos com largura e altura iguais.
- baralho-de-cartões: Alinha múltiplos cartões com espaçamento, obsoleto no Bootstrap 5.
- texto-*: Classes utilitárias para estilização de cor do texto (ex.: texto-primário, texto-sucesso).
- bg-*: Classes utilitárias para estilização de cor de fundo (ex.: bg-claro, bg-escuro).
Este resumo conciso lista as classes essenciais usadas para construir e personalizar cartões Bootstrap.
Como Incluir o Bootstrap em Seu Projeto
Você pode começar a usar o Bootstrap em seu projeto facilmente, incluindo-o de uma Rede de Distribuição de Conteúdo (CDN) ou baixando os arquivos necessários de getbootstrap.com
Neste exemplo, vamos demonstrar como configurar uma página HTML simples usando uma CDN para incluir o componente de cartão do Bootstrap. Este método permite que você crie e estilize cartões rapidamente, sem necessidade de configuração adicional.
Siga os passos abaixo para criar seu arquivo index.html e incluir o Bootstrap 5.3.3:
<!doctype html>
<html lang="en">
<head>
<!-- Meta tags obrigatórias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- Pacote Bootstrap com Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Incluímos os arquivos do Bootstrap através de um CDN, garantindo que a versão mais recente do framework esteja sempre disponível. Uma divisão de container foi adicionada para servir de base para o seu conteúdo, permitindo que você comece a construir com o componente de cartão do Bootstrap imediatamente.
Para mais detalhes, você pode explorar a documentação do modelo inicial.
Criando Cartões Básicos do Bootstrap
Para criar um cartão simples, siga estes passos:
- Use a classe .card com uma tag <div> para criar o container externo.
- Adicione a classe .card-body a uma tag interna <div> para definir o corpo do cartão.
- Use as classes .card-title e .card-subtitle com tags de cabeçalho (<h5> e <h6>) para adicionar o título e subtítulo do cartão.
- Use a classe .card-text com tags <p> para incluir conteúdo textual.
- Use a classe .card-img-top com a tag <img> para adicionar uma imagem no topo do cartão.
Estes são os blocos de construção fundamentais de um layout de cartão básico. Aqui está um exemplo:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Este código gera um cartão com uma imagem, título, subtítulo, texto e um botão, e ele se ajustará à largura do container pai, a menos que seja especificado de outra forma usando a propriedade style=”width: 30rem;”.
Esta é uma captura de tela do resultado:
Cartões Horizontais no Bootstrap
Cartões horizontais permitem exibir conteúdo em um layout lado a lado, tornando-os ideais para designs compactos e organizados. Você pode criá-los usando classes de grade para um comportamento responsivo, garantindo que o cartão fique ótimo em todos os dispositivos.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Esta é uma captura de tela do resultado:
Grupos de Lista em Cartões Bootstrap
O Bootstrap permite que você melhore seus cartões incluindo grupos de lista, facilitando a exibição de conteúdo estruturado e organizado. As classes list-group e list-group-flush se integram perfeitamente aos cartões, permitindo que os desenvolvedores criem listas visualmente atraentes.
Veja como você pode criar um cartão com um grupo de lista flush:
<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>
Melhorando Recursos do Cartão
Adicionando Cabeçalhos e Rodapés
Você pode melhorar seus cartões incluindo cabeçalhos e rodapés com as classes .card-header e .card-footer. Aqui está um exemplo:
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> Esta é a captura de tela do resultado:
Este layout adiciona mais contexto ao cartão com um cabeçalho e rodapé estilizados.
Sobrepondo Texto em Imagens
Use .card-img-overlay para sobrepor conteúdo sobre a imagem. Ao simplesmente trocar a classe card-body pela classe card-img-overlay, podemos usar a imagem como uma sobreposição:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Esta é uma captura de tela do resultado:
Adicionando Capas de Imagem ao Cartão
Adicione imagens no topo ou na parte inferior do cartão usando .card-img-top ou .card-img-bottom .
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>Esta é uma captura de tela do resultado:
As imagens no topo e na parte inferior do cartão são chamadas de image caps .
Design Responsivo com Cartões Bootstrap
O design responsivo garante que seus cartões fiquem ótimos em todos os dispositivos. Use o sistema de grade do Bootstrap para controlar o layout.
Código de Exemplo
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Esta é uma captura de tela do resultado:
Ajustando Altura e Largura do Cartão Bootstrap
Para definir uma largura específica para um cartão, você pode usar o atributo style ou as classes de utilitário do Bootstrap. Aqui está um exemplo:
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>Esta é uma captura de tela do resultado:
A largura deste cartão é limitada a 10rem, que pode ser ajustada com base nas necessidades do seu design.
Normalmente, a altura do cartão será ajustada para se ajustar verticalmente ao conteúdo do cartão, mas também podemos controlá-la usando CSS personalizado (por exemplo, style=”height: 10rem;”) ou utilitários de dimensionamento do Bootstrap (por exemplo, <div class=”card h-200″>).
Por favor, note que a versão mais recente do Bootstrap passou a usar unidades rem em vez de unidades px porque rem é uma unidade de medida escalável — então funciona melhor com as configurações do usuário, o que torna o texto muito mais acessível. O resultado é que todos os elementos na página escalarão com o tamanho da tela.
Você pode aprender mais sobre os novos recursos do Bootstrap no artigo “Bootstrap: Recursos Super Inteligentes para Te Conquistar” do SitePoint.
Usando o Sistema de Grid para Controlar a Largura
Outra opção para controlar a largura do componente de cartão Bootstrap é usar a grid do Bootstrap (linhas e colunas):
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>Esta é uma captura de tela do resultado:
Neste exemplo, dois cartões são exibidos lado a lado, cada um ocupando quatro colunas (col-md-4) em telas médias e maiores.
Estilos de Cartão
O Bootstrap oferece várias opções para personalizar cartões, incluindo cores de fundo, bordas e estilos de texto.
Cores de Fundo e Texto
Você pode alterar as cores de fundo e texto de um cartão usando classes utilitárias como .bg-primary ou .text-white.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>Cores de Bordas
Use as classes .border-{color} para personalizar a cor da borda dos seus cards. O texto dentro do card também pode ser estilizado com .text-{color}.
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>Cabeçalhos e Rodapés Transparentes
Remova a cor de fundo dos cabeçalhos e rodapés usando .bg-transparent e personalize suas bordas.
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>Misturando Fundos e Bordas
Combine utilitários de fundo e borda para estilos únicos.
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>Aqui está o resultado mostrando quatro estilos diferentes de cards em um layout de uma única linha:
O Bootstrap permite que você crie cards com diferentes estilos de cabeçalho
- ‘cabeçalho título do card principal’ para seções principais
- ‘cabeçalho título do card claro’ para designs sutis
- ‘cabeçalho título do card secundário’ para cards com texto de suporte.
- ‘cabeçalho título do card escuro’ para looks ousados
- ‘cabeçalho título do card de sucesso’ para mensagens positivas
- ‘cabeçalho título do card de perigo’ para avisos.
Com essas opções versáteis de estilização de cards, você também pode criar designs únicos como um “cabeçalho título do card de aviso”, “cabeçalho título do card de informação” para enfatizar informações críticas ou chamar a atenção para detalhes específicos de forma contínua.
Adicionando Navegação
Outra característica interessante do componente de card do Bootstrap é a possibilidade de adicionar padrões avançados de navegação à seção de cabeçalho, como abas e pílulas de navegação.
Adicionando Abas ao Cabeçalho do Card
Para incluir abas no cabeçalho do cartão, use as classes .nav-tabs e .card-header-tabs em uma lista não ordenada (<ul>). Aqui está um exemplo:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>Esta é a captura de tela do resultado:
Adicionando Pílulas ao Cabeçalho do Cartão
Da mesma forma, podemos adicionar pílulas de navegação simplesmente substituindo .nav-tabs por .nav-pills e .card-header-tabs por .card-header-pill na tag de lista <ul>:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>Esta é a captura de tela do resultado:
Você pode encontrar mais informações sobre isso na documentação de componentes de navegação do Bootstrap
Adicionando Links ao Componente de Cartão do Bootstrap
Podemos adicionar rapidamente links dentro dos cartões usando a tag <a> com a classe .card-link:
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>Esta é a captura de tela do resultado:
Alinhando e Transformando Texto em Componentes de Cartão do Bootstrap
O Bootstrap fornece classes de utilidade de texto para alinhar e transformar texto dentro de um componente de cartão. Para alinhamento de texto, você pode usar as seguintes classes:
- .text-start para alinhamento do texto do cartão à esquerda
- .text-end para alinhamento do texto do cartão à direita
- .text-center para alinhamento do texto do cartão ao centro
- .text-justify para alinhamento justificado do texto do cartão (aplica-se a versões mais antigas, obsoleto no Bootstrap 5)
- .text-nowrap para evitar a quebra de texto
Você também pode transformar o texto usando as seguintes classes:
- .text-lowercase para transformar o texto em letras minúsculas
- .text-uppercase para transformar o texto em letras maiúsculas
- .text-capitalize para capitalizar a primeira letra de cada palavra
Personalizando o componente de cartão Bootstrap: cores de fundo, primeiro plano e borda
Você pode personalizar o fundo, o texto e as cores da borda de um cartão Bootstrap usando classes utilitárias de texto e fundo. Aqui estão alguns exemplos:
- Cores de Texto: Use .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark ou .text-white para mudar a cor do texto.
- Cores de Fundo: Use .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark ou .bg-white para mudar a cor de fundo.
- Cores de Borda: Use .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark ou .border-white para estilizar a cor da borda.
A demonstração do CodePen abaixo mostra todos os diferentes tipos de cartões que podemos criar com Bootstrap. Sinta-se à vontade para experimentar por conta própria:
Criando Layouts Avançados Com o Componente de Cartão Bootstrap
O cartão Bootstrap é um componente de UI versátil amplamente utilizado em layouts web modernos para exibir tipos de conteúdo mistos (como texto e imagens) como uma única entidade ou coleções agrupadas.
Os cards são especialmente úteis para design responsivo e são comumente implementados em layouts como o layout Alvenaria, também conhecido como layout semelhante ao Pinterest.
Os cards podem ser usados para criar layouts de galerias de imagens, postagens de blog ou produtos de e-commerce. Grandes plataformas como o Google e o Facebook aproveitam os cards extensivamente para organizar e exibir conteúdo em suas aplicações web.
Anteriormente, a construção de layouts avançados desse tipo exigia um profundo conhecimento de CSS e HTML. No entanto, com os recursos mais recentes do Bootstrap, os desenvolvedores podem criar layouts baseados em cards responsivos e visualmente atraentes sem esforço.
Classes como .card-group, .card-deck e .card-columns simplificam o processo de organização de cards com estilo e alinhamento consistentes.
Agrupamento/Aninhamento de Cards
Grupos de Cards no Bootstrap são uma maneira eficiente de exibir vários componentes de cards como uma única entidade anexada com largura e altura uniformes.
Esse layout é alcançado usando a propriedade display: flex;, garantindo que todos os cards se alinhem perfeitamente. É particularmente útil para design responsivo e layouts web modernos, onde dimensões de cards consistentes são essenciais.
Para criar um grupo de cards, use a classe .card-group como um div de envoltório contendo cards individuais.
Aqui está um exemplo mostrando um grupo de três cards:
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>Esta é uma captura de tela do resultado:
Como pode ser visto, os três cartões estão anexados e têm a mesma largura e altura.
Baralhos de Cartas
Nas versões anteriores do Bootstrap, .card-deck era usado para criar layouts de cartões onde os cartões tinham a mesma largura e altura, mas não estavam anexados uns aos outros. No entanto, no Bootstrap 5, o sistema de grade é recomendado para esse fim. Essa abordagem oferece maior flexibilidade e responsividade.
Para obter um layout semelhante, use a classe .row com .col para controlar o espaçamento e alinhamento dos cartões. Aqui está um exemplo:
<div class="row row-cols-1 row-cols-md-3 g-4">
Como podemos ver, os cartões têm o mesmo tamanho com alguma margem entre eles.
Colunas de Cartões
Nas versões anteriores do Bootstrap, a classe .card-columns era usada para criar um layout semelhante ao Masonry, onde os cartões eram adicionados de cima para baixo e da esquerda para a direita. No entanto, no Bootstrap 5, esse recurso foi removido.
Para obter um layout semelhante, você pode usar o sistema de grade em combinação com o layout Masonry em CSS ou um plugin JavaScript como Masonry.js para comportamentos mais complexos.
Aqui está como criar um layout simples no estilo Masonry usando o sistema de grade e CSS:
Otimizando o Desempenho
O desempenho eficiente é crucial para criar cartões Bootstrap que carregam rapidamente e se adaptam perfeitamente. Aqui estão técnicas práticas para aprimorar o desempenho ao integrar componentes de cartão Bootstrap como div class card body e h5 class card title.
Carregamento Preguiçoso de Imagens
O carregamento preguiçoso atrasa o carregamento de imagens até que elas sejam visíveis na janela de visualização, otimizando a velocidade da página. Use o atributo loading=”lazy” com card img top para uma solução eficiente.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">Otimizar Tamanhos de Imagem
Redimensione as imagens para caber nas dimensões de seu contêiner, garantindo tempos de carregamento mais rápidos. Use img-fluid com a classe div card img para escalar automaticamente as imagens.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">Isso garante que o card img top se ajuste perfeitamente, independentemente da largura do elemento pai.
Minificar CSS e JavaScript
Minimize estilos e scripts para reduzir os tamanhos dos arquivos. Combine vários elementos div class card header e minimize o CSS personalizado para uma renderização mais rápida.
Exemplo Otimizado
Em vez de aplicar estilos repetitivos ou personalizados como este:
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>Use as classes de utilitário do Bootstrap para uma estrutura mais limpa e fácil de manter:
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>Use SVGs para Ícones
Os SVGs são leves e escaláveis, tornando-os ideais para cabeçalhos de cartões e elementos decorativos. Eles carregam mais rápido e mantêm a nitidez em todos os dispositivos.
Exemplo
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>Pré-carregar e Pré-buscar Recursos
Use rel=”preload” para carregar recursos críticos e rel=”prefetch” para antecipar necessidades futuras. Isso é especialmente útil para conteúdo pesado de cartão.
Exemplo
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">Reduza a Complexidade do DOM
Ao evitar estruturas div class card excessivamente aninhadas que podem retardar a renderização. Simplifique os layouts para otimizar o desempenho.
Antes da Otimização
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>Depois da Otimização
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>Otimizar Fontes
Carregue fontes personalizadas ou use fontes do sistema para reduzir a latência. Uma classe div limpa do corpo do cartão pode destacar ainda mais o apelo visual de seus cartões.
Exemplo
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>Conclusão
O componente de cartão do Bootstrap é uma adição poderosa ao framework Bootstrap, que permite aos desenvolvedores criar páginas da web no estilo moderno sem a necessidade de mergulhar profundamente em como o CSS funciona. Você pode adicionar layouts de cartão para representar galerias de imagens, widgets de painel e exibir postagens de blog ou produtos para um site de comércio eletrônico adicionando classes CSS.
Como resultado dos novos recursos e componentes, o Bootstrap continua a ser um poderoso framework CSS disponível para todos, especialmente para os desenvolvedores que precisam criar seus próprios layouts responsivos e no estilo moderno, mas que não têm tempo e orçamento suficientes ou o conhecimento profundo de CSS necessário para produzir código personalizado.
Se você já domina o básico do Bootstrap e está se perguntando como levar suas habilidades do Bootstrap para o próximo nível, confira nosso Curso de Construção do Seu Primeiro Site com Bootstrap 4 para uma introdução rápida e divertida ao poder do Bootstrap.
Perguntas Frequentes sobre o Domínio dos Componentes de Cartão do Bootstrap para Design Responsivo
O que é um Componente de Cartão do Bootstrap?
Um Componente de Cartão Bootstrap é um contêiner moderno e flexível para conteúdo, permitindo que você crie layouts visualmente atraentes para texto, imagens e multimídia. Os cartões fazem parte do framework Bootstrap, projetado para ajudar os desenvolvedores a organizar informações de maneira responsiva e amigável para dispositivos móveis.
Como Criar um Componente de Cartão Bootstrap?
Criar um Componente de Cartão Bootstrap é simples. Você pode usar uma div com a classe card como contêiner e adicionar conteúdo como títulos, texto e imagens dentro dela. Aqui está um exemplo:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>Como Definir Altura e Largura do Cartão no Bootstrap?
Você pode personalizar a largura e a altura do cartão Bootstrap usando estilos inline ou classes utilitárias do Bootstrap. Por exemplo:
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>Alternativamente, você também pode usar classes utilitárias de altura do cartão Bootstrap, como w-50 ou h-100, para definir as dimensões do cartão de forma responsiva.
Como Redimensionar um Cartão no Bootstrap?
Para redimensionar um cartão, você pode usar classes utilitárias de tamanho de cartão do Bootstrap, como w-25, w-50 ou w-75 para largura, e h-auto ou h-100 para altura. Isso garante que seu cartão se adapte ao layout sem a necessidade de CSS adicional. Aqui está um exemplo:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>Como Criar um Título de Cartão no Bootstrap?
Para adicionar um título ao seu cartão, use um elemento <h5> com a classe=”card-title”. Essa classe garante que o título seja estilizado de forma consistente com os padrões de design do Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>Como Posso Usar a Classe card-body no Bootstrap?
A classe card-body é uma classe utilitária que fornece preenchimento e organiza o conteúdo dentro de um cartão Bootstrap. É o contêiner principal para o conteúdo de um cartão.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>Como Corrigir o Tamanho do Cartão Bootstrap?
Para corrigir o tamanho de um cartão, aplique largura e altura específicas usando estilos inline ou classes utilitárias. Por exemplo:
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>Como Ajustar o Tamanho do Cartão no Bootstrap?
O tamanho do cartão pode ser ajustado dinamicamente usando as classes utilitárias do Bootstrap ou CSS Grid. Aqui está um exemplo de dimensionamento responsivo de cartões:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>Posso Personalizar os Fundos e Bordas do Cartão Bootstrap?
Sim, o Bootstrap oferece extensas classes utilitárias de personalização. Use bg-primary para cores de fundo e border-success para estilização de bordas. Exemplo:
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>Como Posso Usar Imagens com Cartões?
O Bootstrap suporta imagens dentro de cartões usando card-img-top ou card-img-bottom. Exemplo:
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>Como Usar a Classe div card body no Bootstrap?
A classe div card body no Bootstrap define a área principal de conteúdo dentro de um cartão. Ela fornece preenchimento e garante espaçamento consistente para texto, imagens e outros elementos dentro do cartão.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>O que é a classe p card text no Bootstrap?
A classe p card text no Bootstrap é usada para estilizar o conteúdo textual dentro do corpo do cartão. Ela aplica estilos tipográficos padrão para deixar o texto com uma aparência limpa e profissional.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>Como Aumentar o Tamanho do Cartão no Bootstrap?
Para aumentar o tamanho do cartão, ajuste sua largura e altura usando w-100 para largura total ou especifique dimensões usando estilos. Exemplo:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>Como Posso Fazer os Cartões Terem a Mesma Altura?
Use .d-flex e .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/