<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 ----------> <div class="container"> <div class="page-header"> <h3>Three equal width columns with different quantities of text.</h3> </div> <div class="row grid-divider"> <div class="col-sm-4"> <div class="col-padding"> <div class="box-of-stuff"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.</p> </div> </div> </div> <div class="col-sm-4"> <div class="col-padding"> <div class="box-of-stuff"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate placeat suscipit maxime tenetur officiis asperiores quae molestias fugiat praesentium dolorum.</p> </div> </div> </div> <div class="col-sm-4"> <div class="col-padding"> <div class="box-of-stuff"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta.</p> </div> </div> </div> </div> </div>

.box-of-stuff { border: 1px solid #BEBEBE; padding: 1em; min-height:250px; } /* Tablet and bigger */ @media ( min-width: 768px ) { .grid-divider { position: relative; padding: 0; } .grid-divider>[class*='col-'] { position: static; } .grid-divider>[class*='col-']:nth-child(n+2):before { content: ""; position: absolute; top: 0; bottom: 0; } .col-padding { padding: 0 15px; } }