"Cols same height with button at bottom"
Bootstrap 3.3.0 Snippet by mdimannyit

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2>All the Same Height: Make the row think it's a table</h2> <div class="big-sexy-buttons"> <div class="container"> <div class="row is-table-row"> <div class="col-sm-4"> <div class="box"> <h2>Oh My God!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. adipisicing elit, sed do eiusmod tempor</p> <a href="http://trovacamporella.com" class="btn btn-primary">trovacamporella</a> </div> </div> <div class="col-sm-4"> <div class="box"> <h2>Becky, Look at Her Butt!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> <a href="http://mispicaderos.com" class="btn btn-primary">mispicaderos</a> </div> </div> <div class="col-sm-4"> <div class="box"> <h2>It is like so super-duper this is a crazy long sentence big!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p> <a href="http://placesforlove.com" class="btn btn-primary">placesforlove</a> </div> </div> </div> </div> </div>
@media only screen and (min-width : 768px) { .is-table-row { display: table; } .is-table-row [class*="col-"] { float: none; display: table-cell; vertical-align: top; } } .is-table-row .box { background: none; position: static; } .is-table-row [class*="col-"] { background: #fff; } /* Base Stuff Ignore */ a { transition: all 225ms ease; } .container { padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 255, 0.1); } .row { padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 255, 0.3); } [class*="col-"] { border: solid 1px #e3e3e3; border-top-width: 2px; border-bottom-width: 2px; padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 255, 0.5); } [class*="col-"]:first-child { border-left-width: 2px; } [class*="col-"]:last-child { border-right-width: 2px; } .box { padding: 25px 7% 0; text-align: center; position: relative; background: #fff; } .box h2 { font-weight: 300; letter-spacing: -0.05em; margin-bottom: 15px; } .box a { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0; padding: 25px 0; } .box p { padding-bottom: 125px; font-size: 16px; font-weight: 300; opacity: 0.8; } .key-box { background: #fff; color: #111 !important; }

Related: See More


Questions / Comments: