<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>Making a Responsive Google Map</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</h2> <iframe src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d17014.36742172978!2d-89.28273651821118!3d48.392611854688965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e6!4m0!4m5!1s0x4d591f80569f50bb%3A0x5b60ea4940ec58e!2s131+Redwood+Ave+W%2C+Thunder+Bay%2C+ON+P7C+1Z5!3m2!1d48.3944212!2d-89.2823727!5e1!3m2!1sen!2sca!4v1424272932825" width="600" height="450" frameborder="0" style="border:0"></iframe> </div> <div class="col-md-4"> <h2>More Stuff</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>