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
"Shipping stats using bootstrap 4.1.1"
Bootstrap 4.1.1 Snippet by
Sunlimetech
4.1.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
4.3K
 
2 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Free shipping , free exchange, premium sport, black friday--> <div class="container-fluid"> <section> <h1 class="text-center text-secondary mb-5">Shipping stats</h1> <div class="row"> <!-- Shipping --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 shipping rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">Free shipping on all UK orders</li> </ul> </div> </div> <!-- ../Shipping --> <!-- exchange --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 exchange rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">15 days return on all items</li> </ul> </div> </div> <!-- ../exchange --> <!-- support --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 support rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">We support online 24/7</li> </ul> </div> </div> <!-- ../support --> <!-- black-friday --> <div class="col-sm-6 col-md-3 col-lg-3 col-xl-3 qualities"> <div class="border border-secondary p-4 mb-3 black-friday rounded"> <ul class="list-inline list-unstyled m-0"> <li class="list-inline-item text-secondary mb-0">Shocking disount on every friday</li> </ul> </div> </div> <!-- ../black-friday --> </div> </section> </div> <!-- ../Free shipping , free exchange, premium sport, black friday-->
@import url('https://fonts.googleapis.com/css?family=Tajawal'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); section{ padding: 60px 0; } .qualities .shipping{ -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .qualities:hover .shipping, .qualities:hover .exchange, .qualities:hover .support, .qualities:hover .black-friday{ box-shadow: -3px 3px 9px 2px rgba(178,178,179,.3); background:#6c757d!important; } .qualities:hover .shipping ul li, .qualities:hover .exchange ul li, .qualities:hover .support ul li, .qualities:hover .black-friday ul li { color:#ffffff !important; } .qualities:hover .shipping ul li:before { color:#ffffff; } .qualities ul li{ padding-left: 20px; position: relative; } .qualities ul li:before{ font-family: FontAwesome; margin-left: -25px; position: absolute; } .shipping ul li:before { content: "\f1b9"; } .exchange ul li:before { content: "\f004"; } .support ul li:before { content: "\f098"; } .black-friday ul li:before { content: "\f06b"; }
Related:
See More
Free Template
Vue Now UI Kit
38.5K
58
Stats example
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76