<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 class="container"> <div class="row"> <h2>Responsive <small>Google Maps</small></h2> <p> <a href="http://bootsnipp.com/iframe/BaPj4" target="_blank">full screen</a> </p> <p> <span class="label label-danger">CSS Tip:</span> CSS wild cards are used to style all col's! </p> <div class="col-md-4"> <h3>Column 1</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet turpis urna, vitae porttitor erat consequat eu. Proin et tristique purus. Fusce condimentum porta ante eget bibendum. Duis vel leo eu ligula lobortis dictum in dapibus nisl. Pellentesque tristique, tortor ut aliquam tincidunt, tortor mi consequat sem, eget iaculis magna eros ut lacus. Donec id maximus turpis. Ut risus libero, rhoncus eget diam ut, malesuada imperdiet tellus. </div> <div class="col-md-4"> <h3>Column 2</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet turpis urna, vitae porttitor erat consequat eu. Proin et tristique purus. Fusce condimentum porta ante eget bibendum. Duis vel leo eu ligula lobortis dictum in dapibus nisl. Pellentesque tristique, tortor ut aliquam tincidunt, tortor mi consequat sem, eget iaculis magna eros ut lacus. Donec id maximus turpis. Ut risus libero, rhoncus eget diam ut, malesuada imperdiet tellus. </div> <div class="col-md-4"> <h3>Google Map Embed</h3> <div class="map-responsive"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2800.42512224691!2d-75.68248158397887!3d45.42093097910055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cce050a6db98d73%3A0x1b0e6fa213d4aaeb!2sUniversity+Of+Ottawa!5e0!3m2!1sen!2sca!4v1452963363617" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div> <hr><br><br><br> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FBaPj4" target="_blank"><small>HTML</small>⁵</a> </p> </div> </div>

/* http://www.sitepoint.com/web-foundations/css3-attribute-selectors/ */ div[class^="col-"], div[class*=" tocolor-"] { background-color: #eee; border: 2px solid #fff; text-align:left; padding: 16px; } h3{ color:blue; } /* Thanks to: By Valentin Garcia 15 October 2015 https://www.ostraining.com/blog/coding/responsive-google-maps/ */ .map-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }