"footer "
Bootstrap 4.1.1 Snippet by Kimani

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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://use.fontawesome.com/ded002a609.js"></script> <title>Document</title> </head> <body> <div class="footer pt-4"> <div class="container"> <div class="down"> <div class="row"> <div class="col-md-3"> <h4> Products </h4> <ul> <li>SMS</li> <li>USSD</li> <li>Airtime</li> </ul> </div> <div class="col-md-3"> <h4>Resources</h4> <ul> <li>Support</li> <li>Developers</li> </ul> </div> <div class="col-md-3"> <h4>Company</h4> <ul> <li>Our Story</li> <li>Contact Us</li> </ul> </div> <div class="col-md-3"> <h4>Legal</h4> <ul> <li>Terms of service</li> <li>Privacy Policy</li> <li>Service level <br> Agreement </li> </ul> <div class="social-media pt-3"> <h4 class="pb-3">social media</h4> <span><a href=""><i class="fa fa-youtube-play" aria-hidden="true"></i></a></span> <span><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></span> <span><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></span> <span><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></span> </div> </div> </div> </div> <hr> <p class="f-b">@2019 | All Rights Reserved | Company Name </p> </div> </div> </body> </html>
.footer { background: #0d2a3a; height: 300px; color: #cccccc; } span { padding-right:15px; } h4 { font-size: 15px; text-transform: uppercase; } ul { font-size: 13px; padding-left: 0px ; list-style: none; padding-top: 10px; li { padding-top: 15px; } } hr { border: 1px solid rgb(146, 146, 146); border-bottom: none; } .f-b { font-size: 12px; text-align: center; } .fa { font-size: 19px; color: #cccccc; } .fa-youtube-play:hover { color: red; } .fa-facebook-official:hover { color: #002fff; } .fa-twitter:hover { color: #00aeff; } .fa-instagram:hover { color: rgb(133, 9, 9); }

Related: See More

Paper Dashboard 2
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Social Icon Strip Footer

Questions / Comments: