Footer Design in HTML Bootstrap Snippets

<footer>
       <div class="container-fluid">
           <div class="row">
               <div class="col-sm-6 col-md-4">
                   <div class="border-top"></div>
                   <h6><span>Where we are now</span></h6>
                   <div class="map"><a href="https://tolmatol.com"><img src="footer-design-snippets.png" alt=""></a></div>
               </div>
               <div class="col-sm-6 col-md-4"> 
                       <div class="border-top"></div>
                       <h6><span>Follow us</span></h6>
                       <ul class="social">
                           <li><a href=""><i class="fa fa-facebook"></i> <span>Facebbok</span></a></li>
                           <li><a href=""><i class="fa fa-twitter"></i> <span>Twitter</span></a></li>
                           <li><a href=""><i class="fa fa-instagram"></i> <span>Instagram</span></a></li>
                           <li><a href=""><i class="fa fa-youtube"></i> <span>Youtube</span></a></li>
                           <li><a href=""><i class="fa fa-pinterest"></i> <span>Pinterest</span></a></li>
                           <li><a href=""><i class="fa fa-rss"></i> <span>Rss</span></a></li>
                       </ul>

               </div>
               <div class="col-sm-12 col-md-4">
                       <div class="border-top"></div>
                   <h6><span>Newsletter</span></h6>
                   <form action="" class="col-md-8 col-md-offset-2">
                       <input type="text" name="" id="" class="form-control" placeholder="Email Address">
                       <button class="btn btn-dark">Subscribe</button>
                   </form>
               </div>
           </div>
       </div>
       <div class="dark-bg">Copyrights &copy; 2018</div>
   </footer>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        footer { margin-top: 80px;}
        footer h6 { text-align: center; position: relative; top:-5px; line-height: 40px; padding: 0px 8px; text-transform: uppercase;}
        footer h6 span{ background: #fff; margin-top: -51px; position: relative; top: -9px; padding: 0px 20px; }
        footer .border-top { content: ''; height: 1px; width: 90%;  background-color: #f2f2f2;  top: 15px; position: absolute; left: 5px;}
        footer input[type="text"] { border-radius: 0px; line-height: 30px; height: 40px; border-color: #eee; box-shadow: none;}
        ul.social { list-style: none;}
        ul.social li { width:32%; display: inline-block; text-align: center; text-align: center; margin-bottom: 20px;}
        ul.social li a { color: #000;}
        ul.social li a i { font-size: 25px;}
        ul.social li a span { width: 100%; float: left; font-size: 12px; color: #ccc; margin-top: 10px;}
        .btn-dark { margin-top:10px; width:100%; background: #000; color: #fff; line-height: 30px; border-radius: 0px; }
        .dark-bg { text-align: center; background: #eee; line-height: 25px; padding: 8px 0px; margin-top: 15px;}
        footer img { text-align: center;}
        .map  { display: flex; justify-content: center;}
        @media (max-width:767px) { 
            footer .border-top {top:3px; }
            }