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="http://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>