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
"Modern Footer"
Bootstrap 3.3.0 Snippet by
themummer
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
668
 
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 ----------> <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"> <!--footer start from here--> <footer> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 footer-col"> <div class="logofooter"> Logo</div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p> <p><i class="fa fa-map-pin"></i> #228, Tiruvannamalai, Tamilnadu, India</p> <p><i class="fa fa-phone"></i> Phone (India) : +91 9999 999 999</p> <p><i class="fa fa-envelope"></i> E-mail : info@prabuuideveloper.com</p> </div> <div class="col-md-3 col-sm-6 footer-col"> <h6 class="heading7">GENERAL LINKS</h6> <ul class="footer-ul"> <li><a href="#"> Career</a></li> <li><a href="#"> Privacy Policy</a></li> <li><a href="#"> Terms & Conditions</a></li> <li><a href="#"> Client Gateway</a></li> <li><a href="#"> Ranking</a></li> <li><a href="#"> Case Studies</a></li> <li><a href="#"> Frequently Ask Questions</a></li> </ul> </div> <div class="col-md-3 col-sm-6 footer-col"> <h6 class="heading7">LATEST POST</h6> <div class="post"> <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p> <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p> <p>facebook crack the movie advertisment code:what it means for you <span>August 3,2015</span></p> </div> </div> <div class="col-md-3 col-sm-6 footer-col"> <h6 class="heading7">Social Media</h6> <ul class="footer-social"> <li><i class="fa fa-linkedin social-icon linked-in" aria-hidden="true"></i></li> <li><i class="fa fa-facebook social-icon facebook" aria-hidden="true"></i></li> <li><i class="fa fa-twitter social-icon twitter" aria-hidden="true"></i></li> <li><i class="fa fa-google-plus social-icon google" aria-hidden="true"></i></li> </ul> </div> </div> </div> </footer> <!--footer start from here--> <div class="copyright"> <div class="container"> <div class="col-md-6"> <p>© 2016 - All Rights with prabuuideveloper</p> </div> <div class="col-md-6"> <ul class="bottom_ul"> <li><a href="#">prabuuideveloper.com</a></li> <li><a href="#">About us</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Faq's</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Site Map</a></li> </ul> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300); @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); ul,li{ padding:0; margin:0; } li{ list-style-type:none; } footer { background-color:#0c1a1e; min-height:350px; font-family: 'Open Sans', sans-serif; } .footer-col { margin-top:50px; } .logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;} .footer-col p { color:#fff; font-size:12px; font-family: 'Open Sans', sans-serif; margin-bottom:15px;} .footer-col p i { width:20px; color:#999;} .footer-ul { list-style-type:none; padding-left:0; margin-left:2px;} .footer-ul li { line-height:29px; font-size:12px;} .footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; } .footer-ul i { margin-right:10px;} .footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; } .copyright { min-height:40px; background-color:#000000;} .copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0;} .heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;} .post p { font-size:12px; color:#FFF; line-height:20px;} .post p span { display:block; color:#8f8f8f;} .bottom_ul { list-style-type:none; float:right; margin-bottom:0;} .bottom_ul li { float:left; line-height:40px;} .bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;} .bottom_ul li a { color:#FFF; font-size:12px;} .social-icon { width: 30px; height: 30px; font-size: 15px; background-color: blue; color: #fff; text-align: center; margin-right: 10px; padding-top: 7px; border-radius: 50%; } .footer-social li{ float:left; } .linked-in{ background-color:#007bb6; } .facebook{ background-color:#3b5998; } .twitter{ background-color:#1da1f2; } .google{ background-color:#f63e28; }
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76