Como fazer cartões Bootstrap 4 da mesma altura em colunas de cartão?

Estou usando o Bootstrap 4 alpha 2 e aproveitando os cartões. Especificamente, estou trabalhando com este exemplo retirado dos documentos oficiais. Como posso fazer com que todos os cartões tenham a mesma altura?

Tudo o que posso pensar agora é definir a seguinte regra CSS:

.card {
    min-height: 200px;
}

Mas essa é apenas uma solução codificada que não funcionará em um caso geral. O código, em minha opinião, é o mesmo dos documentos, ou seja:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Você pode colocar as classes na "linha" ou na "coluna"? Não ficará visível nos cartões (borda) se você usá-lo na linha. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

Algumas das outras respostas aqui parecem 'malucas'. Por que usar uma altura mínima ou, pior ainda, uma altura fixa?

Achei que esse problema (alturas iguais) fosse parte do motivo da progressão para longe das divs de bloco flutuante.

Estou usando o Bootstrap 4 (Beta 2). Enquanto isso, a situação parece ter mudado. Tive o mesmo problema e encontrei uma solução fácil. Este é o meu código:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

Com "col-sm-12 col-lg-6" tornei os cartões responsivos. Com "cartão h-100", coloquei todos os cartões na altura de sua coluna pai. No meu sistema isso funciona, mas não sou um profissional. Então, espero ter ajudado alguém.

Melhor solução, o Bootstrap 4 tem tudo que você precisa: USE O .d-flexe .flex-fillclasse. Não use os, card-deckspois eles não respondem. Eu usei col-sm, você pode usar a .colclasse que quiser, ou usar col-lg-xo x significa número de coluna de largura, por exemplo, 4 ou 3 para melhor visualização se o post tiver mais de 3 ou 4 por coluna

Aqui está a besta, tente reduzir a janela do navegador para XS para vê-la em ação:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Você pode aplicar a classe h-100, que significa altura 100%.

ATUALIZAÇÃO: No Bootstrap 4 , o flexbox agora é o padrão e cada card-decklinha conterá 3 cartões. Os cartões serão preenchidos com a altura total.

http://www.codeply.com/go/x91w5Cl6ip

O Bootstrap 4 alpha card-columnsusa colunas CSS3 que realmente não suportam alturas iguais (exceto preenchimento de coluna que só é suportado no Firefox).

Se, em vez disso, você habilitar o modo flexbox do Bootstrap 4, poderá usar o card-decke um pouco de CSS para equalizar a altura e agrupar a cada 3 colunas.

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Cartão Bootstrap Relacionado
de mesma Altura na Col

Aqui está como eu fiz:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

embrulhe os cartões dentro

<div class="card-group"></div>

ou

<div class="card-deck"></div>

Eu fiz uma abordagem um pouco diferente. Usando o invólucro do Card Deck

Eu adicionei uma regra de estilo que limita a altura do bloco do cartão:

.card .card-block {max-height:300px;overflow:auto;}

Isso dá o seguinte resultado:

Você pode usar o baralho de cartas, ele irá alinhar todas as cartas ... isso vem da página oficial do bootstrap 4.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Outra abordagem útil são as grades de cartão :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

A maneira mais mínima de conseguir isso (que eu saiba) :

• Aplica-se .text-monospacea todos os textos do cartão.
• Limite todos os textos nos cartões ao mesmo número de caracteres.

ATUALIZAR

Adicione .text-truncateo título do cartão e ou outros textos. Isso força os textos a uma única linha. Fazer as cartas têm a mesma altura.

Eu sou um novato nisso, então, por favor, perdoe se eu estiver perdendo alguma coisa.

Eu tentei muitos dos itens acima. Se você definir a altura = 100%, o cartão sempre se expandirá para o maior comprimento do cartão mais longo. O contêiner restringirá todos ao mesmo comprimento.

Eu queria ver o contêiner, então usei a cor de fundo para me ajudar a ver o que estava acontecendo.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

isso funcionou bem pra mim:

<div class="card card-body " style="height:80% !important">

forçando nosso CSS sobre o CSS geral de bootstraps.

Me deparei com esse problema, a maioria das pessoas usa jQuery ... Aqui estava minha solução. "Não se preocupe, eu sou apenas um iniciante nisso ..."

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Se a altura de qualquer item de cartão for, por exemplo, 400px (com base em seu conteúdo), porque o padrão para flex-align é esticar, então .card-item (filho de linha ou classe de coleção de cartão) será esticado. fazer com que a altura do cartão seja 100% da altura do pai ocupará essa altura total.

Espero estar correto. Sou eu?

Se alguém estiver interessado, existe um plugin jquery chamado: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

matchHeight torna a altura de todos os elementos selecionados exatamente igual. Ele lida com muitos casos extremos que fazem com que plug-ins semelhantes falhem.

Para uma linha de cartas, eu uso:

<div class="row match-height">

Em seguida, habilite todo o site:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

jsfiddle

Basta adicionar a altura desejada com CSS, exemplo:

.card{
    height: 350px;
}

Você terá que adicionar seu próprio CSS.

Se você verificar a documentação, isso é para o estilo de alvenaria - o ponto é que eles não têm a mesma altura.