"Highlight box 2"
Bootstrap 3.0.0 Snippet by bindassanant

<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 ----------> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4 servicebox"> <img class="" src="https://www.tourmyindia.com/imagesh1/recmended-icone-img4.png" alt="Bootstrap Image Preview" width="99" height="73"> <h3> Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> <button type="button" class="btn btn-primary btn-default btn-block"> Details </button> </div> <div class="col-md-4 servicebox"> <img class="" src="https://www.tourmyindia.com/imagesh1/recmended-icone-img4.png" alt="Bootstrap Image Preview" width="99" height="73"> <h3> Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> <button type="button" class="btn btn-block btn-primary"> Details </button> </div> <div class="col-md-4 servicebox"> <img class="" src="https://www.tourmyindia.com/imagesh1/recmended-icone-img4.png" alt="Bootstrap Image Preview" width="99" height="73"> <h3> Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> <button type="button" class="btn btn-primary btn-block"> Details </button> </div> </div> <div class="row"> <div class="col-md-4 servicebox"> <img class="" src="https://www.tourmyindia.com/imagesh1/recmended-icone-img4.png" alt="Bootstrap Image Preview" width="99" height="73"> <h3> Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> <button type="button" class="btn btn-primary btn-default btn-block"> Details </button> </div> <div class="col-md-4 servicebox"> <img class="" src="https://www.tourmyindia.com/imagesh1/recmended-icone-img4.png" alt="Bootstrap Image Preview" width="99" height="73"> <h3> Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> <button type="button" class="btn btn-block btn-primary"> Details </button> </div> <div class="col-md-4 servicebox"> <img class="" src="https://www.tourmyindia.com/imagesh1/recmended-icone-img4.png" alt="Bootstrap Image Preview" width="99" height="73"> <h3> Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> <button type="button" class="btn btn-primary btn-block"> Details </button> </div> </div> </div> </body>
body { background:url("https://www.bypeople.com/wp-content/uploads/2015/05/css-gradient-background.png"); padding:5%; } .servicebox{ background: rgba(255,255,255,1); background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1))); background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 ); border-radius: 1%; max-width: 350px; min-height: 244px; -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75); box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75); padding-bottom: 1%; margin: 1%; } .servicebox > h3{ color: #1162a7; border-bottom: 3px groove; text-align: center; padding: 4%; margin: 3% -1% 4% -1%; text-transform: uppercase; font-weight: bold; font-size: 110%; } .servicebox img{ margin-bottom: 0%; margin-right: 3%; padding: -4%; float: left; display: block; max-width: 100%; height: auto;Circle }

Related: See More


Questions / Comments: