Bootstrap same height cards within cols
<p>With Bootstrap 3.3.6 I want to make 3 cards.</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-4"&gt;
    &lt;div class="card"&gt;
      &lt;p&gt;Some dummy text here&lt;/p&gt;
      &lt;button&gt;Click Here&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
    &lt;div class="card"&gt;
      &lt;p&gt;Some dummy text here&lt;/p&gt;
      &lt;button&gt;Click Here&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
    &lt;div class="card"&gt;
      &lt;p&gt;Some dummy text here&lt;/p&gt;
      &lt;button&gt;Click Here&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

.card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
}
</code></pre>

<p>Now that the Dummy text is not the same length, the cards will not be the same height.</p>

<p>I found a trick using flexbox here: <a href="https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height">How can I make Bootstrap columns all the same height?</a>, but this will be working on the immediate children of the .row not the .card</p>

<p>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.</p>