<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <!--Hello Guys You Don't need to change anything else just Replace the Image and It will look Beautiful Hope You'll like it... --> <!------ Footer Sextion Start here --------> <footer class="footer pt-5 bg-lg"> <div class="container" data-aos="fade-up"> <div class="row text-white underline"> <div class="col-md-3 pb-4"> <a href="#" class="text-dark"><h2 class="blue-link"><img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="logo" class="d-inline-block">w3s</h2></a> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo proident, sunt in culpa qui officia deserunt mollit anim id est laborum...</p> <a href="#" class="text-primary">Read More <i class="fa fa-caret-right" aria-hidden="true"></i></a> </div> <div class="col-md-3 pb-4"> <div class="underline mb-2"> <h4 class="text-dark">Recent Posts</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="underline mb-2"> <h5 class="text-dark">SEptember 8 2015</h5> <p class="light-gold">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p> </div> <h5 class="text-dark">23 december 1998</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p> </div> <div class="col-md-3 pb-4"> <div class="underline mb-2"> <h4 class="text-dark">On Twitter</h4> <p><a href="#" class="blue-link">@waxomLorem</a> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="underline mb-2"> <p>ipsum dolor sit amet <a href="#" class="blue-link">@waxomLorem</a> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <p>ipsum dolor sit amet @waxomLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="col-md-3 pb-4"> <h4 class="text-dark">Dribbble Widget</h4> <div class="footer-gallery d-flex flex-wrap"> <img class="m-1" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="footer-gallery-img"> <img class="m-1" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="footer-gallery-img"> <img class="m-1" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="footer-gallery-img"> <img class="m-1" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="footer-gallery-img"> <img class="m-1" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="footer-gallery-img"> <img class="m-1" src="https://www.w3schools.com/images/w3schools_green.jpg" alt="footer-gallery-img"> </div> </div> </div> <!-- Footer-Bottom --> <div class="container d-flex flex-wrap justify-content-between my-3"> <div> <p><a href="#">Copyrights©</a> @ 2015 | <a href="#"> Privacy Policy</a> | <a href="#"> FAQ</a> | <a href="#"> Support</a></p> </div> <div> <p>Design by <a class="blue-link" href="#">@Waxom</a> || Only on Envanto Market</p> </div> </div> </div> </footer>

* { margin: 0; padding: 0; } p { color: #666666; } h3, h4, h5 { color: #333333; } img[alt="logo"] { max-width: 50px; } img[alt^="footer"] { max-width: 110px; } .blue-link { color: #38B1FF; } .underline{ border-bottom: 1px solid #000000; padding-bottom: 5px; } .bg-lg { background-color: #F4F4F4; }