19.02.2025

Altura Uniforme das Cartas no Bootstrap: Uma Solução Sem CSS

Resposta Rápida

Para alinhar as cartas do Bootstrap à mesma altura, coloque-as em um container flexível com as propriedades display: flex e flex-wrap: wrap definidas. Para os elementos .card, defina flex: 1 para permitir que eles se expandam e contraiam igualmente.

.flex-cards {
  display: flex;
  flex-wrap: wrap;
}

.flex-cards .card {
  flex: 1;
}

Seu HTML ficará assim:

<div class="flex-cards">
  <div class="card-columns">
    <!-- Suas cartas do Bootstrap -->
  </div>
</div>

Essa abordagem ajudará a manter a uniformidade no design responsivo.

Explicação Detalhada

Alcançar um alinhamento uniforme da altura para cartas em uma coluna pode parecer complexo. No entanto, existem vários métodos eficazes:

Use Classes Utilitárias

O Bootstrap oferece classes utilitárias como .d-flex e .align-items-stretch, que estão prontas para uso. Atribua essas classes aos containers das cartas para obter o resultado desejado.

<div class="d-flex flex-wrap align-items-stretch">
  <div class="card">...</div>
  <div class="card">...</div>
  <!-- Outras cartas -->
</div>

Preenchimento de Espaço Vertical

Usando a classe .h-100, as cartas podem ocupar todo o espaço vertical disponível, mantendo o alinhamento correto.

<div class="card h-100">...</div>

Trabalhando com o Grid

O sistema de grid do Bootstrap permite controlar layouts de forma precisa, garantindo responsividade. As classes .row e .col ajudarão a manter a mesma altura e ajustar layouts facilmente para diferentes telas.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <div class="card h-100">...</div>
    </div>
    <!-- Outras cartas na grade -->
  </div>
</div>

Equilibrando o Conteúdo

Equilibre o conteúdo dentro das cartas para alcançar uma aparência uniforme. Utilize .card-block para criar uma estrutura que será típica para todas as cartas.

Para os Amantes da Precisão

Você pode usar a função calc() em conjunto com as classes do Bootstrap para ajustar finamente a altura das cartas.

.card {
  height: calc(100% - 20px);
}

Evite definir uma altura mínima. Use os recursos responsivos do Bootstrap para alcançar o resultado desejado.

Visualização

Veja como as cartas aparecem antes de aplicar Flexbox ou Grid:

[📘📚, 📕, 📙📗📓] 

E depois:

.card-columns {
  display: flex;
  flex-wrap: wrap;
}

.card {
  height: 100%;
}

O resultado que você alcançará após a transformação:

[📘📗📕, 📘📗📕, 📘📗📕] 

Layout Responsivo

Lembre-se de que o layout do seu site deve ser responsivo:

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">
    <div class="card h-100">...</div>
  </div>
  <!-- Colunas e cartas responsivas -->
</div>

Evite Alturas Fixas

A regra principal para criar layouts elegantes é evitar alturas fixas. Use margin-bottom para criar espaço entre os elementos e deixe o conteúdo ditar os tamanhos das cartas.

Aprimore Suas Habilidades

Consulte a documentação do Bootstrap para dicas adicionais e uma compreensão mais profunda das metodologias. Ao explorar a documentação, você encontrará respostas para muitas perguntas.

Recursos Úteis

1. Cartas · Bootstrap — a documentação oficial do Bootstrap.
2. Guia Completo de Flexbox | CSS-Tricks — tudo sobre Flexbox.
3. Blocos de Altura Igual em Linhas | CSS-Tricks — como fazer blocos com tamanho igual.
4. Flex · Bootstrap — guia do Bootstrap para utilitários flex.
5. Guia Completo de CSS Grid | CSS-Tricks — uma compreensão detalhada do CSS Grid.
6. Flexbox | web.dev — explorando Flexbox e outros métodos CSS do web.dev.

Video

Navigation