responsive design with bootstrap

This fiddle is written as a solution for the stackoverflow question http://stackoverflow.com/questions/36779414/responsive-design-with-bootstrap

by Jacob Nelson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 text-center">
      <button class="btn btn-primary" >click me</button>
      <button class="btn btn-info" >click me</button>
    </div>
  </div>
  
  <div class="map_container">
    <div id="googleMap" class="map_canvas"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('googleMap');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </div>
  
</div>

CSS

#googleMap {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
      }