<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Even height div's</h1>
<p>Template suggestion for even height divs. Based on flexbox. No fancy stuff.</p>
</div>
</div>
</div>
<div class="container">
<div class="row box-row">
<div class="col-md-4 box-outer">
<div class="box-inner">
<h2>Title of box</h2>
<p>Sed ut perspiciatis unde omnis isteunde omnis istevunde omnis isteunde omnis isteunde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
</div>
<a class="btn btn-absolute">More</a>
</div>
<div class="col-md-4 box-outer">
<div class="box-inner">
<h2>Title of box</h2>
<p>Sed ut perspiciatis unde omnis isteunde omnis istevunde omnis isteunde omnis isteunde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni</p>
</div>
<a class="btn btn-absolute">More</a>
</div>
<div class="col-md-4 box-outer">
<div class="box-inner">
<h2>Title of box</h2>
<p>Sed ut perspiciatis unde omnis isteunde omnis istevunde omnis isteunde omnis isteunde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
</div>
<a class="btn btn-absolute">More</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>You're welcome. Cheers. </p>
</div>
</div>
</div>
