Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"service block"
Bootstrap 3.3.0 Snippet by
vivekbisht109
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
447
 
0 Fav
Post to Facebook
Tweet this
<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="sumit kumar"> <title>Trial</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> </head> <body> <section id="service"> <div class="container"> <div class="row row-1"> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-1"> <div class="icon-col"> <i class="fa fa-snowflake-o" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-2"> <div class="icon-col"> <i class="fa fa-cloud-download" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4-l"> <div class="ser-col ser-3"> <div class="icon-col"> <i class="fa fa-cogs" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> </div> <!--=====row 1============--> <!--====row 2============--> <div class="row row-2"> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-4"> <div class="icon-col"> <i class="fa fa-star" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-5"> <div class="icon-col"> <i class="fa fa-send" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> <span class="circle hidden-xs"> <i class="fa fa-circle-thin" aria-hidden="true"></i> </span> </div> </div> <div class="col-md-4 ser-col-4-l"> <div class="ser-col ser-6"> <div class="icon-col"> <i class="fa fa-rss" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> </div> <!--=======row 2============--> <!-- row 3============--> <div class="row row-3"> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-7"> <div class="icon-col"> <i class="fa fa-lock" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> <div class="col-md-4 ser-col-4"> <div class="ser-col ser-8"> <div class="icon-col"> <i class="fa fa-gift" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> <div class="col-md-4 ser-col-4-l"> <div class="ser-col ser-9"> <div class="icon-col"> <i class="fa fa-plug" aria-hidden="true"></i> </div> <h2>this is a loerem spe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet enim mauris. Fusce hendrerit velit vitae enim hendrerit ultrices. </p> <a href="#" class="btn"> Read More</a> </div> </div> </div> <!--=======row 3============--> </div> </section> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
#service{background-color: ghostwhite;padding-top: 100px;padding-bottom: 100px;} .row-1 .ser-col-4{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;} .row-1 .ser-col-4-l{border-bottom: solid 1px #ccc;} .row-2 .ser-col-4{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;} .row-2 .ser-col-4-l{border-bottom: solid 1px #ccc;} .row-3 .ser-col-4{border-right:solid 1px #ccc;} @media (max-width:768px){ .ser-col-4-l{border-right:solid 1px #ccc;border-bottom: solid 1px #ccc;border-left:solid 1px #ccc;} .ser-col-4{border-left:solid 1px #ccc;border-bottom: solid 1px #ccc;} } .ser-col{width:100%;height:auto;text-align: center;padding:20px;position: relative;} .icon-col{width:80px;height:80px;border-radius: 50%;text-align: center;margin-left: auto;margin-right: auto;} .icon-col i{font-size: 35px;padding: 20px;} .circle { position: absolute; bottom: -11px; right: -24px; z-index: 99; } .circle i{color:#ccc;font-size: 18px;background-color:ghostwhite;} .btn { display: inline-block; padding: 6px 12px; margin-bottom: 10px; margin-top: 10px; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; color: red; background-image: none; border: 1px solid red; border-radius: 0px; } .ser-col h2{color:#777; margin-bottom: 20px;} .ser-col p{color:#3e3b3b; margin-bottom: 20px;} /*====== service 1 ====*/ .ser-1 .icon-col{border: solid 1px red;} .ser-1 .icon-col i{color:red;} .ser-1 .btn{color:red;border: 1px solid red;} /*====== service 2 ====*/ .ser-2 .icon-col {border: solid 1px green;} .ser-2 .icon-col i{color:green;} .ser-2 .btn{color:green;border: 1px solid green;} /*====== service 3 ====*/ .ser-3 .icon-col {border: solid 1px chocolate;} .ser-3 .icon-col i{color:chocolate;} .ser-3 .btn{color:chocolate;border: 1px solid chocolate;} /*====== service 4 ====*/ .ser-4 .icon-col {border: solid 1px blue;} .ser-4 .icon-col i{color:blue;} .ser-4 .btn{color:blue;border: 1px solid blue;} /*====== service 5 ====*/ .ser-5 .icon-col {border: solid 1px deepskyblue;} .ser-5 .icon-col i{color:deepskyblue;} .ser-5 .btn{color:deepskyblue;border: 1px solid deepskyblue;} /*====== service 6 ====*/ .ser-6 .icon-col {border: solid 1px mediumslateblue;} .ser-6 .icon-col i{color:mediumslateblue;} .ser-6 .btn{color:mediumslateblue;border: 1px solid mediumslateblue;} /*====== service 7 ====*/ .ser-7 .icon-col {border: solid 1px mediumseagreen;} .ser-7 .icon-col i{color:mediumseagreen;} .ser-7 .btn{color:mediumseagreen;border: 1px solid mediumseagreen;} /*====== service 8 ====*/ .ser-8 .icon-col {border: solid 1px salmon;} .ser-8 .icon-col i{color:salmon;} .ser-8 .btn{color:salmon;border: 1px solid salmon;} /*====== service 9 ====*/ .ser-9 .icon-col {border: solid 1px gold;} .ser-9 .icon-col i{color:gold;} .ser-9 .btn{color:gold;border: 1px solid gold;}
Related:
See More
Free Template
Coming Sssoon Page
70.4K
93
Simple Comment Block
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76