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 bootstrap 4"
Bootstrap 4.1.1 Snippet by
Shivamsemisetia
4.1.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
869
 
0 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 ----------> <footer> <div class="foter_sec"> <div class="container"> <div class="row main_foter"> <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12 foter_content"> <h5 class="foter_title">shaek</h5> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the moreture, discovered the undoubtable source.</p> </div> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 foter_content"> <h5 class="foter_title">Useful Links</h5> <ul> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Our Causes</a></li> <li><a href=""> Events</a></li> <li><a href="">Contact</a></li> </ul> </div> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 foter_content"> <h5 class="foter_title">Our Causes</h5> <ul> <li><a href="">Water Purify</a></li> <li><a href="">Food Collect</a></li> <li><a href="">Health Fund</a></li> <li><a href="">Free Education</a></li> <li><a href="">Poor Health</a></li> </ul> </div> <div class="col-lg-4 col-md-6 col-sm-4 col-xs-12 foter_content"> <h5 class="foter_title">Contact Us</h5> <ul> <li><a href="">123 City , United States <br>Of America 750.</a></li> <li><a href="">Office +1-234-567-891</a></li> <li><a href="">Contect@1.Com</a></li> </ul> <div class="icons"> <a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-linkedin"></i></a> <a href=""><i class="fa fa-instagram"></i></a> </div> </div> </div> </div> </div> <div class="copyright"> <div class="container"> <div class="row"> <div class="col-md-12 text-center text-center"> <p>© 2020 abc.Com All Rights Reserved.</p> </div> </div> </div> </div> </div> </footer>
/* ========================================================================== Footer Css Start ========================================================================== */ .foter_sec { background: #00003F; color: #fff; } .copyright { background: #000026; color: #fff; } .foter_content { padding: 30px 20px; } .foter_content p { font-size: 16px; line-height: 28px; padding-right: 25px; } .copyright p { font-size: 16px; line-height: 40px; padding: 10px 0; } .foter_title { font-size: 24px; line-height: 32px; padding-bottom: 10px; position: relative; margin-bottom: 15px; } .foter_title::after { position: absolute; content: ""; height: 2px; width: 42px; background: #F39811; bottom:0; left: 0; transition: width 0.5s ease, background-color 0.5s ease; } .foter_title:hover:after { width: 50%; } .foter_content ul{ list-style:none; margin:0; padding:0; } .foter_content ul li { padding: 7px 0; } .foter_content ul li a { color:#fff; } .foter_content ul li a:hover { color: #f39811; } .icons i { padding: 3px; margin-top: 5px; } .icons a { color:#fff; } .icons a:hover { color: #f39811; }
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76