"Bootstrap 4 Footer Design"
Bootstrap 4.1.1 Snippet by dkstudio

<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 ----------> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="footer-bottom-area bg-dark-light section-padding-sm"> <div class="container"> <div class="row widgets footer-widgets"> <div class="col-lg-3 col-md-6 col-12"> <div class="single-widget widget-about"> <h5 class="widget-title">About Us</h5> <img src="images/others/about-widget-image.jpg" alt="about widget image"> <p>We are a team of designers and developers that create high quality <a href="www.dkstudio.in">Readmore...</a></p> </div> </div> <div class="col-lg-3 col-md-6 col-12"> <div class="single-widget widget-quick-links"> <h5 class="widget-title">My Account</h5> <ul> <li><a href="#">Sitemap</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Your Account</a></li> <li><a href="#">Advanced Search</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <div class="col-lg-3 col-md-6 col-12"> <div class="single-widget widget-quick-links"> <h5 class="widget-title">Customer Service</h5> <ul> <li><a href="#">Shipping Policy</a></li> <li><a href="#">Compensation First</a></li> <li><a href="#">My Account</a></li> <li><a href="#">Return Policy</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <div class="col-lg-3 col-md-6 col-12"> <div class="single-widget widget-contact"> <h5 class="widget-title">Contact Us</h5> <ul> <li class="address"> <span class="icon"><i class="fa fa-map-marker"></i></span> <p>Address : No 100 Baria Sreet 100/2 Jaipur City, IN.</p> </li> <li class="phone"> <span class="icon"><i class="fa fa-phone"></i></span> <p><a href="#">+91 7568 54 3012</a></p> </li> <li class="fax"> <span class="icon"><i class="fa fa-fax"></i></span> <p><a href="#">+91 7568 54 3012</a></p> </li> <li class="email"> <span class="icon"><i class="fa fa-envelope-o"></i></span> <p><a href="#">dkstudioin@gmail.com</a></p> </li> </ul> </div> </div> </div> </div> </div>
.bg-dark-light { background: #323232 !important; } .bg-theme, .bg-dark, .bg-dark-light, .bg-secondary { color: #ffffff; } .widgets.footer-widgets .widget-title { color: #ffffff; font-family: "Raleway", sans-serif; font-weight: 700; margin-bottom: 30px; letter-spacing: 0.5px; position: relative; padding-bottom: 15px; } .widgets.footer-widgets .widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100px; background: #13bfb1; } .widgets.footer-widgets .widget-quick-links ul { margin-top: -4px; } .widgets.footer-widgets .single-widget ul { padding-left: 0; margin-bottom: 0; } .widgets.footer-widgets .widget-quick-links ul li { display: block; } .widgets.footer-widgets .widget-quick-links ul li a { display: block; font-size: 13px; color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 9px 0; } .widgets.footer-widgets .single-widget ul li { list-style: none; font-family: "Raleway", sans-serif; } .widgets.footer-widgets .widget-contact ul li { color: #000; font-size: 13px; color: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widgets.footer-widgets .widget-contact ul li span { font-size: 14px; color: #ffffff; border: 2px solid #cccccc; border-radius: 3px; height: 32px; width: 32px; display: inline-block; line-height: 28px; text-align: center; margin-right: 20px; } .widgets.footer-widgets .widget-contact ul li.phone, .widgets.footer-widgets .widget-contact ul li.fax { font-size: 15px; } .widgets.footer-widgets .widget-contact ul li + li { margin-top: 20px; }

Related: See More


Questions / Comments: