"Modern Dark Theme Footer"
Bootstrap 3.3.0 Snippet by Fanna1119

<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 ----------> <footer class="container-fluid text-center foot"> <div class="copyrights"> <p class="white-txt">Your Site Name © 2017 <br><br> <img class="footimg" src="https://openclipart.org/download/59293/logo-water.svg" alt="Logo"> </p> <hr class="dark-line"> <a class="link" href="#">Contact Us</a>&nbsp <a class="link" href="#">Privacy Policy</a>&nbsp <a class="link" href="#">Terms & Conditions</a> <br><br> <p class="white-txt small"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare elit odio, eu imperdiet ligula ullamcorper sed. </p> </div> </footer>
.copyrights{ margin-top:25px; } footer.container-fluid.text-center.foot { background: #383838; } .dark-line{ border-top: 1px solid #525252; } .white-txt{ color: #FFF; } a.link { color: #008acc; border: 1px #008acc solid; padding: 5px; text-decoration: none; } a.link:hover { background: #008acc; color: #383838; } .footimg{ width: 5rem; }

Related: See More


Questions / Comments: