<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 ----------> <footer> <div class="row"> <div class="col-sm-4"> <p> <b><a href="#">Home</a></b> </p> <p> <b><a href="#">Research</a></b> </p> <p> <b><a href="#">Help</a></b> </p> <p> <b><a href="#">Library Information</a></b> </p> <p> <div id="hoverFB"> <a href="https://www.facebook.com/AUPhillipsLibrary/" style="display:block;width:114px;height:21px;"> </a> </div> </p> </div> <div class="col-sm-4"> <b><p> Information & Research Help </p></b> <p> 630-844-5437 (phone) </p> <p> 630-844-3848 (fax) </p> <p> 630-796-7615 (text) </p> <b><p> Interlibrary Loan </p></b> <p> 630-844-5439 </p> </div> <div class="col-sm-4"> <div id="googleMap"> <script> function myMap() { var mapProp= { center:new google.maps.LatLng(41.7554612,-88.3474496), zoom:18, }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } </script> <script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyCgviDbIc_VTplx4nnsLQ-75oBDzUe-_Tg&callback=myMap"> </script> </div> </div> </div> </footer>

footer { font-size: .9em; padding-bottom: 5px; border-top: 3px solid #31813a; background-color: #1e357b; background:linear-gradient(#f2f2f2, #e6e6e6); color: #333; padding: 15px; line-height: .3; } footer a { color: #333; } footer a:hover { color: #48a948; text-decoration: none; } #googleMap { width: 100%; height: 90px; -webkit-filter: grayscale(100%); filter: grayscale(100%); } #hoverFB { background-image: url('https://libapps.s3.amazonaws.com/accounts/108452/images/FB-FindUsonFacebook-online-144bw.png'); width: 114px; height: 21px; } #hoverFB:hover { background-image: url('https://libapps.s3.amazonaws.com/accounts/108452/images/FB-FindUsonFacebook-online-144grn.png'); width: 114px; height: 21px; }