Twitter Bootstrap Question posted in

Equals high of div-containers in cards-Twitter bootstrap

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?

Tags:

3

Answers


  1. 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

    Login or Signup to reply.
  2. 0 
    .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>
    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search