O que São e como Criar Cards no Bootstrap? - Passo a Passo

Nesse post iremos ver o que são e como criar cards no Bootstrap, o quão fascinantes e belos que são para serem usados em nossas páginas.

Bootstrap

Quando li tutoriais de como criar cards no Bootstrap e vi exemplos simples, não fiquei muito impressionado ou empolgado; nem dei muita bola. Mas, continue lendo e veja os exemplos que postei abaixo, verá que são fascinantes e belos.

O que são esses tais de cards ou cartões? O que é Bootstrap?

Se você é novato em desenvolvimento Web, essas dúvidas podem surgir. Mas, irei explicar de forma simples e resumida.

Bootstrap é um framework para CSS, um conjunto de coisas prontas. Ao invés de usarmos CSS passo a passo, podemos usar seu framework e pegar coisas que já estão prontinhas para estilizar nossa página.
Cards ou cartões no Bootstrap são quadradinhos ou retângulos dentro da nossa página que podemos usar para exibir informações ou conteúdo de forma organizada e visualmente atraente. Pode ser usado para mostrar textos, imagens, botões e outros elementos em um formato flexível e responsivo.

Dica: veja mais posts sobre bootstrap clicando aqui.

Os cartões (cards) são flexíveis e responsivos.

A flexibilidade dos cards possibilita que ele se adapte automaticamente ao tamanho do conteúdo dentro dele. Isso permite que o card se ajusta e reorganiza seu layout com base no tamanho da tela ou dispositivo em que está sendo visualizado, garantindo uma experiência consistente em diferentes dispositivos e tamanhos de tela.

Falando da responsividade dos cards, é a capacidade de se adaptarem a diferentes tamanhos de tela e dispositivos, garantindo uma boa experiência de visualização e interação em smartphones, tablets e computadores.

Exemplos de Cards (cartões) no Bootstrap

Para termos uma noção do quanto fascinante cards podem ser, deixando o layout da página impressionante, veja esses exemplos:

Exemplo 02: Cards (cartões) no Bootstrap

Exemplo 03: Cards (cartões) no Bootstrap

Olha esse outro, que ótimo que ficou:

Exemplo 04: Cards (cartões) no Bootstrap

Criando Cards Passo a Passo

Antes de tudo, insira os links CNDs do Bootstrap e JQuery entre as tags <head> e </head> do seu site.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


</head>

Para saber sobre links CDNs, veja: Links CDNs para Bootstrap

Agora, vamos começar a criar os cartões (cards) no corpo (entre as tags <body> e </body>) do nosso site.

Obs.: Veja ao final sobre o tamanho dos cartões do Bootstrap. Inicialmente, nosso exemplo ocupará toda largura da página.

#1 classe “card” do cartão (card)

A primeira coisa a se fazer é criar a classe principal, que é class=”card”, dentro de uma div.

  <div class="card">

   </div>

Aqui, você ainda não conseguirá ver nada ao visualizar no navegador.

#2 O corpo do cartão (card)

Criaremos o corpo do nosso cartão usando class=”card-body”. Body quer dizer corpo em português.

<div class="card">
      <div class="card-body">
         Este é um texto dentro do corpo de um cartão em Boostrap. Aqui posso colocar qualquer coisa que queira, desde um simples texto como uma imagem...
      </div>
   </div>

Se você for até o navegador irá ver nosso card se formando. 🙂

Coloque um texto ou qualquer outra coisa que queira dentro do corpo do card.

#3 criando títulos e subtítulos dentro do card

Acima criamos o nosso texto, mas que tal criarmos um título e subtítulo para ele? Para isso, usamos as classes .card-title e .card-subtitle mas tem que ser dentro de tags HTML para título: <h1>…<h6>

        <div class="card">
                <div class="card-body">
                         <h5 class="card-title">Título do Card</h5>
                         <h6 class="card-subtitle mb-4 text-muted">Subtítulo do Card</h6>
                         <p>Este é um texto dentro do corpo de um cartão em Boostrap. Aqui posso colocar qualquer coisa que queira, desde um simples texto como uma imagem...</p>
                </div>
        </div>

Veja que usei, para o subtítulo, mb-4 para dar um espaço na margem inferior(margin-bottom) e text-muted para deixar um cinza mais claro como cor do texto.

#4 adicionando links ou botões

podemos adicionar links ou botões para quando o usuário clicar ser direcionado para outro local ou página.

veja como está fincando:

#5 adicionando imagens

Podemos usar a tg <img src..> e dentro dela a classe .card-img-left

  

 <div class="card" >
      <div class="card-body">
         <img src="imagens/ideia.jpg" class="card-img-left"  alt="exemplo com cartão"  >
          <h5 class="card-title">Título do Card</h5>
          <h6 class="card-subtitle mb-4 text-muted">Subtítulo do Card</h6>
          <p class="card-text">Este é um texto dentro do corpo de um cartão em Boostrap. Aqui posso colocar qualquer coisa que queira, desde um simples texto como uma imagem...</p>
         <button type="button" class="btn btn-outline-secondary btn-sm">Texto Completo</button>
         <button type="button" class="btn btn-outline-secondary btn-sm">Site Básico</button>
      </div>
   </div>

Veja como está ficando:

Veja outras opções de classes para imagens que podemos usar:

card-img-top: posiciona a imagem no topo do cartão
card-img-bottom: posiciona a imagem na parte inferior do cartão
card-img-left: posiciona a imagem à esquerda do cartão
card-img-right: posiciona a imagem à direita do cartão
card-img-cover: faz a imagem preencher o cartão
card-img-full: faz a imagem preencher o cartão, sem deixar espaço para margens ou bordas
card-img-thumbnail: faz a imagem ficar menor e caber dentro da borda do cartão
card-img-circle: transforma a imagem em um círculo
card-img-rounded: adiciona cantos arredondados à imagem
card-img-opacity: define a opacidade da imagem
card-img-width: define a largura da imagem
card-img-height: define a altura da imagem

#5.1 colocando a imagem na parte de cima ou inferior do cartão

Para alterar a posição da imagem basta colocar a linha da tag <img..> onde deseja. Por exemplo, poderá colocar abaixo da seguinte forma:

   <div class="card" >
      <div class="card-body">
          <h5 class="card-title">Título do Card</h5>
          <h6 class="card-subtitle mb-4 text-muted">Subtítulo do Card</h6>
          <p class="card-text">Este é um texto dentro do corpo de um cartão em Boostrap. Aqui posso colocar qualquer coisa que queira, desde um simples texto como uma imagem...</p>
         <img src="imagens/ideia.jpg" class="card-img-right"  alt="exemplo com cartão"  >
         <button type="button" class="btn btn-outline-secondary btn-sm">Texto Completo</button>
         <button type="button" class="btn btn-outline-secondary btn-sm">Site Básico</button>
      </div>
   </div>

Veja que a imagem está depois do texto. Acima apenas dos botões.

é bom também usar class=”card-img-top” para qsuando a imagem estiver na parte de cima e class=”card-img-bottom” para quando estiver na parte de baixo.

Se você usar uma dessas duas classes agora verá que ficará ruim porque o nosso cartão ainda está do tamanho da página, mas quando vermos como diminuir o tamanho dele verá como ficará bom o resultado.

#5.2 imagem no cartão no fundo

Podemos usar class=”card-img-overlay” dentro da classe onde estava o corpo para colocar a imagem atrás do texto.

   <div class="card" >
      <img src="imagens/ideia.jpg" class="card-img-right"  alt="exemplo com cartão"  >
      <div class="card-img-overlay">
          <h5 class="card-title">Título do Card</h5>
          <h6 class="card-subtitle mb-4 text-muted">Subtítulo do Card</h6>
          <p class="card-text">Este é um texto dentro do corpo de um cartão em Boostrap. Aqui posso colocar qualquer coisa que queira, desde um simples texto como uma imagem...</p>
         <button type="button" class="btn btn-outline-secondary btn-sm">Texto Completo</button>
         <button type="button" class="btn btn-outline-secondary btn-sm">Site Básico</button>
      </div>
   </div>

#5.3 imagem do cartão na lateral

Podemos posicionar a imagem na lateral.

Para isso, temos que aplicar o que já aprendemos nos posts Sistema de Grades no Bootstrap – ou Grid sobre contêineres.

<div class="card mb-3"  style="max-width: 540px;" >
      <div class="row g-0">
         <div class="col-md-4"> <!-- div para a imagem -->
            <img src="imagens/ideia.jpg" class="img-fluid"  alt="exemplo com cartão">              
         </div>
         <div class="col-md-8"> <!-- div para titulos e corpo -->
            <div class="card-body">
               <h5 class="card-title">Título do Cartão</h5>
               <p class="card-text">Este é um texto dentro do corpo de um cartão em Boostrap. Aqui posso colocar qualquer cois               <p class="card-text"><small class="text-muted">Informações adicionais</small></p>
            </div>
         </div>
      </div>
   </div>

Algumas observações sobre as linhas acima:

A classe “g-0” em class=”row g-0″ do Bootstrap indica que não há espaçamento entre as colunas dentro de uma linha. g- é uma abreviação de “gap” (espaçamento), indicando que não há espaçamento entre as colunas dentro de uma linha.
A classe “img-fluid” torna a imagem responsiva, ajustando seu tamanho de acordo com o contêiner. A classe “rounded-start” adiciona cantos arredondados à esquerda da imagem.

#6 Usando listas nos cartões

Sim, podemos usar qualquer coisa dentro do corpo dos cartões do Bootstrap. Por que não usar listas? Há classes próprias para elas.

<div class="card" style="width:17rem">
      <ul class="list-group list-group-flush">
         <li class="list-group-item">Manga</li>
         <li class="list-group-item">Goiaba</li>
         <li class="list-group-item">Laranja</li>
         <li class="list-group-item">Limão</li>
         <li class="list-group-item">Melancia</li>
      </ul>
   </div>

Podemos ainda acrescentar (card-header) um cabeçalho e rodapé (card-footer)

   <div class="card" style="width:17rem">
      <div class="card-header">
         Lista de frutas
      </div>
      <ul class="list-group list-group-flush">
         <li class="list-group-item">Manga</li>
         <li class="list-group-item">Goiaba</li>
         <li class="list-group-item">Laranja</li>
         <li class="list-group-item">Limão</li>
         <li class="list-group-item">Melancia</li>
      </ul>
      <div class="card-footer">
         <small class="text-muted">Atualizada: 25/12/2023</small>
      </div>
   </div>

Veja como nossos dois cartões feitos com bootstrap estão:

Olha esse outro exemplo com citação,

<div class="card">
  <div class="card-header">
    Citação
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Uma citação conhecida, contida em um elemento blockquote.</p>
      <footer class="blockquote-footer">Alguém famoso em <cite title="Source Title">Título da Fonte</cite></footer>
    </blockquote>
  </div>
</div>

Tamanho dos cartões do Bootstrap

Como deu para perceber qundo criei o primeiro cartão, os cartões, por padrão, tomam toda a largura, ocupando 100%, a não ser que coloquemos estilos CSS como em

style="width: 18rem;"

Podemos usar as classes de grades do bootstrap com suas colunas (col) e linha (row).

Veja detalhes em Sistema de Grades no Bootstrap – ou Grid

Uma outra opção que temos são ferramenta, como class=”w-25” para uma largura de 25% e class=”w-50″ para uma de 50%. Essas classes são usadas tendo como referência o intem pai, ou seja, o item onde o objeto que está sendo redimensionado está dentro ou faz parte.

Se quiser redimensionar tendo como referência a janela de visualização use classes como:

class=”min-vw-100″
class=”min-vh-100″
class=”vw-100″
class=”vh-100″

alterando os valores conforme desejar.

O que São e como Criar Cards no Bootstrap? – Passo a Passo