"Equal height columns with button"
Bootstrap 3.0.0 Snippet by einayan

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <div class="row row-eq"> <div class="col-sm-4 col-eq"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a <br/> galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, <br/> but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in <br/> the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with <br/>desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <div class="info-button"> <a class="btn btn-block btn-primary" href="http://mispicaderos.com">+ Information</a> </div> </div> <div class="col-sm-4 col-eq"> <p>2</p> <div class="info-button"> <a class="btn btn-block btn-primary" href="http://placesforlove.com">+ Information</a> </div> </div> <div class="col-sm-4 col-eq"> <p>3</p> <div class="info-button"> <a class="btn btn-block btn-primary" href="http://trovacamporella.com">+ Information</a> </div> </div> </div> </div>
.container{ background-color:#000000; } .row-eq{ display: flex; } .col-eq{ flex: 1; background: #ccc; margin: 10px; } .col-eq p{ padding-bottom: 50px; } .info-button { position: absolute; left: 0; right: 0; bottom: 0; margin: 5px; } @media (max-width: 768px) { .row-eq{ display: block; } .col-eq{ flex: unset; } }

Related: See More


Questions / Comments: