<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 ----------> <div id="map-row" class="row"> <div class="col-xs-12"> <!-- PASTE GOOGLE MAP IFRAME HERE. ENSURE HEIGHT MATCHES IN CSS .map-overlay CLASS. --> <!-- <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=15+Springfield+Way,+Hythe,+CT21+5SH&aq=t&sll=52.8382,-2.327815&sspn=8.047465,13.666992&ie=UTF8&hq=&hnear=15+Springfield+Way,+Hythe+CT21+5SH,+United+Kingdom&t=m&z=14&ll=51.077429,1.121722&output=embed"></iframe> --> <iframe src="http://mapbuildr.com/frame/8i8sek" frameborder="0" height="400" width="100%"></iframe> <!-- /IFRAME --> <div id="map-overlay" class="col-xs-5 col-xs-offset-6" style=""> <h2 style="margin-top:0;color:#fff;">Contact us</h2> <address style="color:#fff;"> <strong>Company name</strong><br> 1234 Street Dr.<br> Vancouver, BC<br> Canada<br> V6G 1G9<br> <abbr title="Phone">Tel:</abbr> (604) 555-4321 </address> </div> </div> </div>

#map-row {} #map-overlay { height:400px; margin-top:-405px; background-color:#669de5; padding:40px; }