<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="footer"> <div class="footer1"> <div class="container-fluid"> <div class="container "> <div class="row"> <div class="col-sm-4"> <h2>About Us</h2><p> <div class="myframegmap"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d448183.73912804417!2d76.81306640115254!3d28.646677246352574!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x37205b715389640!2sDelhi!5e0!3m2!1sen!2sin!4v1513154329228" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div></p><br> </div> <div class="col-sm-4"> <h2>Home</h2> <p> <i class="fa fa-home"></i>    <a href="#"> Home</a><br> <i class="fa fa-user-o"></i>    <a href="#"> About Us</a><br> <i class="fa fa-map-marker"></i>    <a href="#"> Contact Us</a><br> <i class="fa fa-briefcase"></i>    <a href="#"> Services</a><br> <i class="fa fa-question-circle"></i>    <a href="#"> Term & Conditions</a><br><br> </p> </div> <div class="col-sm-4 "> <h2>Contact Us</h2> <p > <i class="fa fa-phone"></i>    <a href="tel:0123456789"> +0123456789</a><br> <i class="fa fa-envelope"></i>    <a href="mailto:abc@abc.com"> abc@abc.com</a><br> <i class="fa fa-map-marker"></i>     A-101 Delhi, India </p> <br> </div> </div> <div class="clear30"></div> </div> </div></div> <div class="footer2"> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="clear30"></div> <div class="col-sm-12 text-center"><p><strong>copyright © 2013-2018 All right reserved.</strong></p></div> <div class="clear30"></div> </div> </div> </div> </div> </div>

.footer1{ background-color: black; color: white; } .footer1 h2{ margin: 5px; padding: 8px; font-size: 25px; font-family: "Times New Roman", Times, serif; } .footer1 a{ color: white; } .footer1 a:hover{ color: ; } .footer1 p{ margin: 5px; padding-top: 2px; padding-left: 10px; font-size: 18px; font-family: "Times New Roman", Times, serif; } .footer1 h2{margin: 5px; padding: 5px; border-bottom: 1px solid white; } /*==========================footer2===========================*/ .footer2{ background-color: #e6e6e6; color: black; } .footer2 p{ margin: 8px; padding: 8px; font-size: 16px; font-family: "Times New Roman", Times, serif; } .myframegmap{ border: 3px solid #f6f5f0; border-radius: 8px; height: 130px; width: 80%; box-shadow: 0px 0px 3px 3px #e7e4dc; overflow: hidden; position: relative; margin: 0 auto; }