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 facilmente a diferentes dispositivos. Ao 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 construir 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 impressionantes.
- 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 Grid 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 última versão 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 observados
Os cartões 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 contêiner estiloso. Abaixo estão algumas características principais que os tornam indispensáveis para os desenvolvedores:
- Facilidade de Uso: Você pode criar rapidamente um cartão 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 Múltiplos Tipos de Conteúdo: Adicione um título do cartão, imagens ou grupos de listas para estruturar seu conteúdo de forma eficaz.
- Responsividade: Usando a grade e os pontos de interrupção do Bootstrap, os cartões podem se adaptar a qualquer tamanho de dispositivo—de celular a desktop.
- Design Personalizável: As classes utilitárias permitem que você ajuste a aparência, incluindo cores, bordas e alinhamento de texto.
- Layouts Avançados: Recursos como grupos de cartões, decks e layouts em alvenaria possibilitam um alinhamento e organização perfeitos.
O que é o Componente de Cartão do Bootstrap?
O Bootstrap introduz um componente de UI versátil e moderno chamado cartões, que servem como contêineres flexíveis e estilosos para exibir vários tipos de conteúdo. Com um estilo padrão mínimo, os cartões do Bootstrap podem ser facilmente aprimorados usando sua ampla gama de classes utilitárias.
Este componente é construído em cima do Flexbox, permitindo um alinhamento e espaçamento precisos. Os desenvolvedores podem usar os utilitários 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 de texto e imagens, etc., e seções de cabeçalho e rodapé opcionais. Você também pode incluir diferentes seções (blocos de cartão) para construir diferentes tipos de cards, dependendo do seu uso.
Principais Classes de Card do Bootstrap
Abaixo estão as principais classes de utilitários de card do Bootstrap, juntamente com seu propósito:
- card: A classe do contêiner principal que define o componente card.
- card-body: Cria a área de conteúdo principal dentro do card.
- card-title: Estiliza o título do card, geralmente usado com tags de cabeçalho como <h5>.
- card-text: Usado para conteúdo textual padrão dentro do card.
- card-header: Adiciona uma seção de cabeçalho estilizada no topo do card.
- card-footer: Adiciona uma seção de rodapé estilizada na parte inferior do card.
- card-img-top: Coloca uma imagem no topo do card.
- card-img-bottom: Coloca uma imagem na parte inferior do card.
- list-group: Cria um grupo de lista dentro do card.
- list-group-item: Estiliza itens individuais no grupo de lista.
- card-group: Agrupa vários cards juntos com largura e altura iguais.
- card-deck: Alinha vários cards com espaçamento, obsoleto no Bootstrap 5.
- text-*: Classes de utilitário para estilização de cor de texto (por exemplo, text-primary, text-success).
- bg-*: Classes de utilitário para estilização de cor de fundo (por exemplo, bg-light, bg-dark).
Esta visão geral concisa lista as classes essenciais usadas para construir e personalizar os cards do Bootstrap.
Como Incluir o Bootstrap no seu Projeto
Você pode começar a usar o Bootstrap no seu projeto facilmente incluindo-o a partir de uma Rede de Entrega de Conteúdo (CDN) ou baixando os arquivos necessários em getbootstrap.com
Para este exemplo, demonstraremos como configurar uma página HTML simples usando um CDN para incluir o componente de card do Bootstrap. Este método permite que você rapidamente crie e estilize cards sem a 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 necessárias -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS do Bootstrap -->
<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 via um CDN, garantindo que a versão mais recente do framework esteja sempre disponível. Uma divisão de contêiner foi adicionada para servir como base para 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 template inicial.
Criando Cartões Básicos do Bootstrap
Para criar um cartão simples, siga estas etapas:
- Use a classe .card com uma tag <div> para criar o contêiner 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 o 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.
Esses 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 de seu contêiner pai, a menos que 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 Listas em Cartões Bootstrap
O Bootstrap permite aprimorar seus cartões incluindo grupos de listas, facilitando a exibição de conteúdo estruturado e organizado. As classes list-group e list-group-flush se integram perfeitamente dentro dos cartões, permitindo que os desenvolvedores criem listas visualmente atraentes.
Veja como você pode criar um cartão com um grupo de listas 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>
Aprimorando Recursos do Cartão
Adicionando Cabeçalhos e Rodapés
Você pode aprimorar 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:
Esse 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 tenham uma ótima aparência em todos os dispositivos. Use o sistema de grid do Bootstrap para controlar o layout.
Exemplo de Código
<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 a Altura e Largura do Cartão Bootstrap
Para definir uma largura específica para um cartão, você pode usar o atributo de estilo ou as classes utilitárias 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 está limitada a 10rem, o que pode ser ajustado 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 os utilitários de dimensionamento do Bootstrap (por exemplo,
Por favor, note que a versão mais recente do Bootstrap mudou para 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 serão escalados de acordo 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 Largura
Outra opção para controlar a largura do componente de cartão do Bootstrap é usar o 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ões
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 mudar 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 Borda
Use as classes .border-{color} para personalizar a cor da borda de seus cartões. O texto dentro do cartão 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 cartões em um layout de uma única linha:
O Bootstrap permite que você crie cartões com diferentes estilos de cabeçalho
- ‘cabeçalho título do cartão primário’ para seções principais
- ‘cabeçalho título do cartão leve’ para designs sutis
- ‘cabeçalho título do cartão secundário’ para cartão com texto de apoio.
- ‘cabeçalho título do cartão escuro’ para looks ousados
- ‘cabeçalho título do cartão de sucesso’ para mensagens positivas
- ‘cabeçalho título do cartão de perigo’ para avisos.
Com essas opções versáteis de estilização de cartão, você também pode criar designs exclusivos como um “cabeçalho título do cartão de aviso”, “cabeçalho título do cartão 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 cartão 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 Cartão
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 dos componentes de navegação do Bootstrap
Adicionando Links ao Componente de Cartão do Bootstrap
Podemos rapidamente adicionar 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 nos Componentes de Cartão do Bootstrap
O Bootstrap fornece classes de utilitário de texto para alinhar e transformar o texto dentro de um componente de cartão. Para alinhamento de texto, você pode usar as seguintes classes:
- .text-start para alinhamento à esquerda do texto do cartão
- .text-end para alinhamento à direita do texto do cartão
- .text-center para alinhamento central do texto do cartão
- .text-justify para alinhamento justificado do texto do cartão (aplica-se a versões mais antigas, obsoleta no Bootstrap 5)
- .text-nowrap para evitar que o texto quebre
Você também pode transformar o texto usando as seguintes classes:
- .text-lowercase para transformar o texto em minúsculas
- .text-uppercase para transformar o texto em maiúsculas
- .text-capitalize para capitalizar a primeira letra de cada palavra
Customizando as Cores de Fundo, Texto e Borda do Componente de Cartão do Bootstrap
Você pode personalizar o fundo, texto e borda de um cartão Bootstrap usando classes utilitárias de texto e fundo. Aqui estão alguns exemplos:
- Cores do 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 da 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.
O demo do CodePen abaixo mostra todos os tipos diferentes de cartões que podemos criar com o Bootstrap. Sinta-se à vontade para experimentar por conta própria:
Criando Layouts Avançados Com o Componente de Cartão do Bootstrap
O cartão Bootstrap é um componente de IU 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 cartões são especialmente úteis para design responsivo e são comumente implementados em layouts como o layout de Masonry, também conhecido como layout semelhante ao Pinterest.
Os cartões podem ser usados para criar layouts para galerias de imagens, postagens de blog ou produtos de e-commerce. Plataformas importantes como Google e Facebook utilizam extensivamente cartões para organizar e exibir conteúdo em suas aplicações web.
Anteriormente, construir layouts tão avançados exigia um conhecimento profundo de CSS e HTML. No entanto, com os últimos recursos do Bootstrap, os desenvolvedores podem criar layouts responsivos e visualmente atraentes baseados em cartões sem esforço.
Classes como .card-group, .card-deck e .card-columns simplificam o processo de organização de cartões com estilo e alinhamento consistentes.
Agrupando/Aninhando Cartões
Grupos de cartões no Bootstrap são uma maneira eficiente de exibir múltiplos componentes de cartão como uma única entidade conectada, com largura e altura uniformes.
Esse layout é alcançado usando a propriedade display: flex;, garantindo que todos os cartões se alinhem perfeitamente. É particularmente útil para design responsivo e layouts web modernos onde dimensões de cartões consistentes são essenciais.
Para criar um grupo de cartões, use a classe .card-group como um div wrapper contendo cartões individuais.
Aqui está um exemplo mostrando um grupo de três cartões:
<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ão 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 a um alvenaria 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 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 melhorar 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 viewport, 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 imagens para se ajustarem às dimensões do contêiner, garantindo tempos de carregamento mais rápidos. Use img-fluid com a classe div card img para redimensionar 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
Minifique estilos e scripts para reduzir o tamanho 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 classes utilitárias 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
SVGs são leves e escaláveis, tornando-os ideais para cabeçalhos de cartão 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
Avoid 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
Pré-carregue fontes personalizadas ou use fontes do sistema para reduzir a latência. Uma classe div limpa no 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 entender profundamente 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 desenvolvedores que precisam criar seus próprios layouts responsivos e no estilo moderno, mas 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, mas 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.
FAQs 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 da estrutura do Bootstrap, projetada 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 de 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 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 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 Fixar o Tamanho do Cartão Bootstrap?
Para fixar 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ão:
<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 Fundos e Bordas de Cartões 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. Aplica estilos de tipografia padrão para fazer o texto parecer limpo 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/