<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>How to embed a "responsive?" Google Map in Bootstrap 3.x</h2> <a class="pull-right" href="http://bootsnipp.com/iframe/b2BWe" target="_blank">full screen</a> <hr> </div> <div class="row"> <div class="col-md-8"> <h2>Google Map here</h2> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2646.7527174334564!2d-89.2720933!3d48.442085600000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4d5921042c473f9d%3A0x4b5caedbcb0367e!2s121+Cherry+Ridge+Rd%2C+Thunder+Bay%2C+ON+P7G!5e0!3m2!1sen!2sca!4v1424198183267" width=100% height="450" frameborder="0" style="border:0"></iframe> </div> <div class="col-md-4"> <h2>Something Else here</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pellentesque quam massa, at posuere felis feugiat eu. Mauris maximus dui sit amet faucibus luctus. Phasellus non mi suscipit nunc dignissim tincidunt eu quis sapien. Integer bibendum ante vel diam varius, vel posuere nisl imperdiet. Nulla sed condimentum arcu, a lacinia ligula. Etiam ac arcu scelerisque, posuere neque gravida, fringilla enim. Etiam vitae lectus varius, rutrum leo sit amet, luctus nisi. Pellentesque velit leo, accumsan at urna vitae, porta efficitur lacus. Vestibulum et mi hendrerit, molestie diam sed, posuere eros. Praesent urna tellus, luctus quis iaculis mollis, tempor varius felis. Fusce ultrices dolor sit amet odio tristique, sit amet congue felis elementum. </p> </div> </div> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fb2BWe" class="pull-right" target="_blank"> <small>HTML</small>⁵ </a> </p> </div>