Equals high of div-containers in cards

Question

I need to make cards in same heigth. I don't mean the card them self, I mean the containers in the cards.

My code is looking like this

.card-text {
  border: 1px solid lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla<br><br>bla </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla bla </div>
        </div>
      </div>
    </div>
  </div>

Has anybody an solution, how to make the card-text equal height?

What do you mean equal height? You have a break inside of your markup which is why it's allocated more space in the DOM, if you don't want it to take up more space, remove the break or set a max-height in CSS? — zfrisch, Sep 06 '18 at 15:32
There is NO CSS property to equalise heights between elements that **do not share a parent.** - You need Javascript. — Paulie_D, Sep 06 '18 at 15:41
setting height with CSS would solve the problem can you be more explicit on what you want to do ? — SomethingCool, Sep 06 '18 at 15:42
Answer is already here : https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-4-cards-the-same-height-in-card-columns/49197410#49197410 — djibe, Sep 07 '18 at 15:43

score 1 · Accepted Answer · answered Sep 06 '18 at 15:54

.card-text {
  border: 1px solid lightgrey;
}

.card {
  height: 100%
}

.card-body {
  display: flex;
  flex-flow: column; 
}

.card-text {
  flex-grow: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="card-group">
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla<br><br>bla </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card">
        <div class="card-body">
          <div class="card-title"> bla bla </div>
          <div class="card-text"> bla bla </div>
        </div>
      </div>
    </div>
  </div>

score 0 · Answer 2 · answered Sep 06 '18 at 15:52

0

You can use flexbox and the property align-items for that. See this

.card-group {
  display: flex;
  align-items: stretch;
}
.card {
  height: 100%;
  border: 1px solid black
}

https://codepen.io/moisesnandres/pen/dqVzGE

answered Sep 06 '18 at 15:52

Moisés Ñañez

97
1
7

score 0 · Answer 3 · answered Sep 06 '18 at 16:30

0

Why dont use .card-deck instead of .card-group? Like: http://getbootstrap.com/docs/4.1/components/card/#card-decks It is made for having differend cards, all with the same hight. They will also expand the sourrounding .row element.

answered Sep 06 '18 at 16:30

Holger Koenemann

146
1

Card-decks are not responsive.Bootstrap should delete them. Better use my solution with flexboxes : https://stackoverflow.com/questions/35868756/how-to-make-bootstrap-4-cards-the-same-height-in-card-columns/49197410#49197410 – djibe Sep 07 '18 at 15:44

Equals high of div-containers in cards

3 Answers3