"Feature Content Boxes"
Bootstrap 3.0.3 Snippet by CarpeDiem

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="iconcontainer"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="iconbox"> <div class="iconbox-icon"> <span class="glyphicon glyphicon-book"></span> </div> <div class="featureinfo"> <h4 class="text-center">Title</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta! </p> <a class="btn btn-default btn-sm" href="#" role="button">View Page »</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="iconbox"> <div class="iconbox-icon"> <span class="glyphicon glyphicon-tasks"></span> </div> <div class="featureinfo"> <h4 class="text-center">Title</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta! </p> <a class="btn btn-default btn-sm" href="#" role="button">View Page »</a> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="iconbox"> <div class="iconbox-icon"> <span class="glyphicon glyphicon-comment"></span> </div> <div class="featureinfo"> <h4 class="text-center">Title</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta! </p> <a class="btn btn-default btn-sm" href="#" role="button">View Page »</a> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <div class="iconbox"> <div class="iconbox-icon"> <span class="glyphicon glyphicon-user"></span> </div> <div class="featureinfo"> <h4 class="text-center">Title</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti atque, tenetur quam aspernatur corporis at explicabo nulla dolore necessitatibus doloremque exercitationem sequi dolorem architecto perferendis quas aperiam debitis dolor soluta! </p> <a class="btn btn-default btn-sm" href=""about.php#bottom"" role="button">View Page »</a> </div> </div> </div> </div> </div> </div>
body { background-color: #ebebeb; } .iconcontainer { margin-top: 20px; margin-bottom: 20px; } .iconbox { background: #ffffff; background-color: #ffffff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.12); padding: 20px 25px; text-align: right; display: block; margin-top: 60px; margin-bottom: 15px; } .iconbox-icon { background-color: #008EED; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin: 0 auto; width: 100px; height: 100px; margin-top: -70px; } .iconbox-icon span { color: #fff; font-size: 42px; display: block; margin-left: auto; margin-right: auto; padding-top: 29px; text-align: center; vertical-align: middle; } .featureinfo h4 { font-size: 26px; letter-spacing: 1px; text-transform: uppercase; } .featureinfo > p { color: #000000; font-size: 16px; padding-top: 4px; text-align: left; } .btn-default { text-shadow: 0px 1px 0px #FFF; background-image: linear-gradient(to bottom, #FFF 0px, #E0E0E0 100%); background-repeat: repeat-x; border-color: #CCC; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.15) inset, 0px 1px 1px rgba(0, 0, 0, 0.075); } .btn-default:hover, .btn-default:focus { background-color: #e0e0e0; background-position: 0 -15px }

Related: See More


Questions / Comments: