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
"footer code full responsive"
Bootstrap 3.0.0 Snippet by
dg393024
3.0.0
footer
responsive
Preview
HTML
CSS
View Full Screen
Fork
Fork this
8.5K
 
1 Fav
Post to Facebook
Tweet this
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--======================footer start======================--> <footer class="webintern-footer"> <div class="webintern-footer-inner"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-3 "> <a class="webintern-footer-logo" href="#"> <img class="img-responsive" src="https://www.freelogodesign.org/img/logo-ex-4.png" style="width:100px;" alt=""> </a> <div class="simple-text dark padding-sm"> <p>Totam rem aperiam, eaque ipsa quae ab illo inv ent ore veritatis et quasi architecto beatae vitae dict eaque ipsa quae ab.</p> </div> <div class="empty-space xs-25 sm-25"></div> </div> <div class="col-sm-6 col-md-2 footer-2"> <!-- webintern_footer_title --> <h4 class="webintern_footer_title h5"><small>Quick Links</small></h4> <ul class="webintern-footer-list"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#"> Services </a></li> <li><a href="#"> Projects </a></li> <li><a href="#"> Portfolio </a></li> <li><a href="#">Contact Us</a></li> </ul> <div class="empty-space xs-25 sm-25"></div> </div> <div class="col-sm-6 col-md-3 footer-3"> <!-- webintern_footer_title --> <h4 class="webintern_footer_title h5"><small> Our Courses </small></h4> <ul class="webintern-footer-list"> <li><a href="#">HTML / CSS / JS </a></li> <li><a href="#">PHP</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">.NET</a></li> <li><a href="#">Android</a></li> <li><a href="#">ISO</a></li> </ul> <div class="empty-space xs-25"></div> </div> <div class="col-xs-12 col-md-4 col-sm-6"> <div class="marg-sm-b30"></div> <!-- webintern_footer_title --> <h4 class="webintern_footer_title h5"><small>Subscribe Newsletter</small></h4> <div class="empty-space marg-lg-b20"></div> <!-- <div class="simple-text last dark "> <p>Get latest updates and offers.</p> </div> --> <div class="empty-space marg-lg-b15"></div> <!-- TT-SUBSCRIBE --> <form method="post"> <div class="tt-subscribe"> <input type="text" required="" placeholder="Enter your email"> <div class="tt-subscribe-submit"> <i class="fa fa-envelope" aria-hidden="true"></i> <input type="submit" value=""> </div> </div> </form> <div class="empty-space marg-lg-b30"></div> <!-- TT-SOCAIL --> <ul class="tt-socail"> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> </ul> </div> </div> </div> </div> <div class="tt-copy"> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="tt-copy-left">Copyright © company 2018. All rights reserved. </div> </div> <div class="col-sm-6"> <div class="tt-copy-right"> Created by: compny </div> </div> </div> </div> </div> </footer>
/*=================footer css start==============*/ .webintern-footer { background: #0d2034; } .webintern-footer-inner { padding-top: 80px; padding-bottom: 50px; } .webintern-footer-logo { display: inline-block; } .webintern-footer .webintern-footer-inner .simple-text p { color: #fff; margin-top: 20px; margin-bottom: 15px; } .simple-text p { font-size: 15px; color: #42435d; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 26px; margin-bottom: 0; } .webintern-footer .webintern-footer-inner .simple-text a { font-family: 'Open Sans', sans-serif; font-weight: 700; color: #f2c21a; font-size: 15px; } .footer-2 { padding-left: 55px; } .webintern_footer_title { margin-top: 0px; margin-bottom: 25px; } .webintern_footer_title small { font-family: 'Work Sans', sans-serif; color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase; } .webintern_footer_title:after { content: ''; display: block; width: 30px; height: 2px; background: #f2c21a; margin-top: 15px; } .webintern-footer-list { padding: 0; } .webintern-footer-list li { margin-bottom: 17px; list-style: none; } .webintern-footer-list a { position: relative; font-size: 15px; line-height: 18px; color: #fff; padding-left: 0; letter-spacing: 0.20px; font-family: 'Open Sans', sans-serif; } .footer-3 { padding-left: 65px; } .webintern-footer-inner .simple-text.last { color: #d5d5d5; font-size: 17px; font-style: italic; font-family: 'Open Sans', sans-serif; font-weight: 400; } .tt-subscribe { position: relative; } .tt-subscribe input:not([type="submit"]) { width: 100%; height: 46px; background: #fff; font-size: 15px; color: #838486; padding-left: 20px; padding-right: 70px; border: 2px solid #fff; -moz-border-radius: 3px; border-radius: 3px; } .tt-subscribe-submit { background: #001b57; } .tt-subscribe-submit { position: absolute; top: 0; right: 0; width: 52px; height: 46px; font-size: 18px; line-height: 46px; color: #2a2a2a; text-align: center; background: #001b57; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; } .tt-subscribe-submit i.fa-envelope:before { content: "\f0e0"; position: relative; z-index: 1; color: #fff; } .tt-subscribe-submit input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #51658d; border: 0; } ul.tt-socail { padding: 0; margin-top: 30px; } .tt-socail li { display: inline-block; margin-right: 10px; } .tt-socail a { display: block; width: 36px; height: 36px; font-size: 17px; line-height: 34px; color: #fff; text-align: center; border: 1px solid #fff; -moz-border-radius: 100%; border-radius: 100%; } .webintern_footer_title small { font-family: 'Work Sans', sans-serif; color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase; } .tt-copy { font-size: 15px; line-height: 20px; color: #fff; background: #51658d; padding: 30px 0; font-family: 'Open Sans', sans-serif; } .tt-copy-right { text-align: right; }
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
how to download this tempate?
bhakti02
()
-
5 years ago
-
Reply
0
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76