15 novembro, 2024

Equal Height Cards – Bootstrap 5

Como Deixar Colunas com Alturas Iguais Usando Bootstrap 5

No desenvolvimento de layouts responsivos, é comum nos depararmos com a necessidade de alinhar visualmente as colunas para que tenham a mesma altura. Com o Bootstrap 5, essa tarefa se torna simples e eficiente. Neste artigo, vou mostrar como você pode alcançar esse efeito utilizando classes específicas do Bootstrap, mantendo seu código limpo e organizado.

Código de Exemplo

<section class="bg-light pt-5 pb-5 shadow-sm">
  <div class="container">
    <div class="row pt-5">
      <div class="col-12">
        <h3 class="text-uppercase border-bottom mb-4">Cards com Alturas Iguais com Bootstrap 5</h3>
      </div>
    </div>
    <div class="row">
      <!--Adicionar as classes aqui d-flex align-items-stretch-->
      <div class="col-lg-4 mb-3 d-flex align-items-stretch">
        <div class="card">
          <img src="https://placehold.co/600x400/0B2F87/FFFFFF/webp?font=Montserrat&text=Card+01" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Card Amostra 01</h5>
            <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis erat in nulla mattis rutrum.</p>
            <a href="#" class="btn btn-primary mt-auto align-self-start">Veja +</a>
          </div>
        </div>
      </div>
      <!--Adicionar as classes aqui d-flex align-items-stretch-->
      <div class="col-lg-4 mb-3 d-flex align-items-stretch">
        <div class="card">
          <img src="https://placehold.co/600x400/0B2F87/FFFFFF/webp?font=Montserrat&text=Card+02" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Card Amostra 02</h5>
            <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis erat in nulla mattis rutrum. Morbi erat neque, tempor at nisl eu, auctor sollicitudin ante. Aenean lacus enim, iaculis vitae faucibus vitae, scelerisque sit amet erat.</p>
            <a href="#" class="btn btn-primary mt-auto align-self-start">Veja +</a>
          </div>
        </div>
      </div>
      <!--Adicionar as classes aqui d-flex align-items-stretch-->
      <div class="col-lg-4 mb-3 d-flex align-items-stretch">
        <div class="card">
          <img src="https://placehold.co/600x400/0B2F87/FFFFFF/webp?font=Montserrat&text=Card+03" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Card Amostra 03</h5>
            <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis erat in nulla mattis rutrum. Morbi erat neque, tempor at nisl eu, auctor sollicitudin ante. Aenean lacus enim, iaculis vitae faucibus vitae, scelerisque sit amet erat. Donec risus dui, laoreet nec elit sit amet, malesuada iaculis urna. Aenean dignissim justo a odio tincidunt, vitae convallis ante scelerisque. Praesent at elit leo.</p>
            <a href="#" class="btn btn-primary mt-auto align-self-start">Veja +</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Como Funciona

No exemplo acima, utilizamos as classes d-flex e align-items-stretch dentro das colunas que contêm os elementos do tipo card. Essas classes do Bootstrap 5 definem que os cartões ocupem toda a altura disponível na linha, independentemente do conteúdo interno. O uso da classe d-flex permite uma estrutura flexível, enquanto align-items-stretch garante que todos os itens filhos estiquem para ter a mesma altura. Isso resulta em colunas visualmente equilibradas e organizadas, proporcionando uma melhor experiência para os usuários.

See the Pen Cards com Alturas Iguais com Bootstrap 5 by Massao Kuroiwa (@massaokuroiwa) on CodePen.

Este artigo foi visualizado 48 vezes.

Compartilhar o Artigo

Sobre o Autor

Oi, eu sou o Massao Kuroiwa! Sou Web Designer e Desenvolvedor Front-End com mais de 9 anos de experiência na criação de sites bonitos, funcionais e otimizados. Comecei minha carreira como técnico em informática e, desde 2015, venho mergulhando no mundo do design e desenvolvimento web, sempre buscando aprender e aprimorar minhas habilidades.

Além de desenvolver sites, também sou um entusiasta do aquarismo. Tenho dois blogs onde compartilho minhas aventuras e conhecimentos.

Obrigado por ler meu artigo! Espero que tenha encontrado informações úteis e inspiradoras. Fique à vontade para explorar mais conteúdos e se conectar comigo.