<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="row"> <h2 class="text-center">Services Blocks</h2> <div class="row"> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <h1 class="tag-title">Heading</h1> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra quam sollicitudin nibh aliquam finibus. Etiam efficitur felis vel imperdiet varius. Maecenas bibendum elementum molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus finibus semper. Fusce molestie tincidunt leo vel varius. Nam scelerisque nulla feugiat leo consequat, id dignissim sem tincidunt. Proin elit mauris, hendrerit in varius sed, facilisis sit amet neque.</p> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Learn more</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <h1 class="tag-title">Heading</h1> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra quam sollicitudin nibh aliquam finibus. Etiam efficitur felis vel imperdiet varius. Maecenas bibendum elementum molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus finibus semper. Fusce molestie tincidunt leo vel varius. Nam scelerisque nulla feugiat leo consequat, id dignissim sem tincidunt. Proin elit mauris, hendrerit in varius sed, facilisis sit amet neque.</p> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Learn more</a> </div> </div> </div> <div class="col-md-4 text-center"> <div class="box"> <div class="box-content"> <h1 class="tag-title">Heading</h1> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra quam sollicitudin nibh aliquam finibus. Etiam efficitur felis vel imperdiet varius. Maecenas bibendum elementum molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus finibus semper. Fusce molestie tincidunt leo vel varius. Nam scelerisque nulla feugiat leo consequat, id dignissim sem tincidunt. Proin elit mauris, hendrerit in varius sed, facilisis sit amet neque.</p> <br /> <a href="ppc.html" class="btn btn-block btn-primary">Learn more</a> </div> </div> </div> </div> </div> </div> </div>

.box { background:#fff; transition:all 0.2s ease; border:2px dashed #dadada; margin-top: 10px; box-sizing: border-box; border-radius: 5px; background-clip: padding-box; padding:0 20px 20px 20px; min-height:340px; } .box:hover { border:2px solid #525C7A; } .box span.box-title { color: #fff; font-size: 24px; font-weight: 300; text-transform: uppercase; } .box .box-content { padding: 16px; border-radius: 0 0 2px 2px; background-clip: padding-box; box-sizing: border-box; } .box .box-content p { color:#515c66; text-transform:none; }