<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="text"> <div class="content-text"> <h3 class="lead"> Project label </h3> <p> And a little description. <br> and so one </p> </div> </div> <div class="text"> <div class="content-text"> <h3 class="lead"> Project label </h3> <p> And a little description. <br> and so one </p> </div> </div> <div class="text"> <div class="content-text"> <h3 class="lead"> Project label </h3> <p> And a little description. <br> and so one </p> </div> </div> <div class="text"> <div class="content-text"> <h3 class="lead"> Project label </h3> <p> And a little description. <br> and so one </p> </div> </div> <div class="text"> <div class="content-text"> <h3 class="lead"> Project label </h3> <p> And a little description. <br> and so one </p> </div> </div> <div class="text"> <div class="content-text"> <h3 class="lead"> Project label </h3> <p> And a little description. <br> and so one </p> </div> </div>

.text { height:200px; display:inline-block; margin: 10px; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden; border-color: rgb(252, 227, 176); background-color: #ffffcc; background-image: url(https://d3dma7a8zw52bz.cloudfront.net/assets/documents/document_body_rules-f0711254a4cc2b734e9317489d363ce2.gif); cursor: pointer; -webkit-user-select: none; } .text p { height: 130px; overflow: hidden; } .content-text { padding:0px 20px 10px; margin: -5px; }