Bootstrap same height cards within cols

Question

With Bootstrap 3.3.6 I want to make 3 cards.

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
</div>

.card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
}

Now that the Dummy text is not the same length, the cards will not be the same height.

I found a trick using flexbox here: How can I make Bootstrap columns all the same height?, but this will be working on the immediate children of the .row not the .card

Another thing, even if the cards will be the same height, the buttons will not be on the same line as they will follow the the text.

score 2 · Answer 1 · answered Jul 15 '16 at 12:27

2

There is no CSS property that can align items in different elements to one another...not even in flexbox.

You could always make the button be at the bottom though...that's just a matter of making the card 100% height of the equal height columns.

.row.flex {
  display: flex;
}

.row.flex .col-md-4 {
  float:none;
  width: 33.3333%;
  background: pink;
  display: flex;
  flex-direction: column;
}

.card {
  font: 100%;
  flex:1;
  border:1px solid grey;
  display: flex;
  flex-direction: column;
}

button {
  margin-top: auto;
  align-self: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row flex">
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolor!</p>
      <button>Click Here</button>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <p>Some dummy text here</p>
      <button>Click Here</button>
    </div>
  </div>
</div>

For some reason, this doesn't work in the Snippet but here's a Codepen.

Codepen Demo

answered Jul 15 '16 at 12:27

Paulie_D

107,962
13
142
161

Sorry for that but everything works well except that the col's won't break as they should to be col-md-12 when resizing the browser and reaching the md breakpoint. – medk Jul 15 '16 at 13:31
That's a simple matter of adding `flex-wrap:wrap` to the rows....but the concept is there. – Paulie_D Jul 15 '16 at 13:40
Well it obviously DOES as it works in the Codepen. If you have a **separate ** question arising from this, then I'd sugegst you ask that in a separate post. – Paulie_D Jul 15 '16 at 13:52
I've added flex-wrap: wrap; after display: flex; within .col.flex and tested on Chrome v51 and Firefox v47 and still doesn't work. (on Codepen) – medk Jul 15 '16 at 14:06
Again...ask a NEW question. – Paulie_D Jul 15 '16 at 14:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/117422/discussion-between-medk-and-paulie-d). – medk Jul 15 '16 at 14:12

score 1 · Answer 2 · edited Aug 26 '17 at 23:50

1

You should remove your card div and set your card class with the col-md-4 And from that you can put the same height with flexbox like that

.row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

edited Aug 26 '17 at 23:50

answered Jul 15 '16 at 12:23

Ersian

219
2
12

Thanks for the advice but the problem here is that bootstrap col's don't have margins and they are stick to each other and I need the cards to be separated with some 20px spacing. – medk Jul 15 '16 at 12:32

Bootstrap same height cards within cols

2 Answers2