title: Div collapse in Twitter Bootstrap
body: <p>I'm trying to add a Google Map to a 2 column grid via Bootstrap.  I've got a problem however that the column which the map sits in has 'collapsed' and so I can only see the very top of the map which should be embedded.  I've tried setting the html and body elements at 100% height and then the div which the maps sits in at 30%, but no luck.  Am I missing something?  Code below...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Basic Bootstrap Template&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;!-- Optional Bootstrap theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
  &lt;script  src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;style&gt;
      html{height:100%;}
      body{height:100%;}
      #map{height:30%;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="page-header"&gt;
            &lt;h1&gt;Testing&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;form&gt;
                      &lt;input type="range" name="points" min="0" max="1000"&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div id ="map" class="col-md-9"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;script&gt;
              var map;
              var mapDiv = document.getElementById('map');
  
              var placesMap = {
                  belfast: {
                      center:{lat: 54.605035, lng:-5.832087},
                      population:50000
                  },
                  lisburn: {
                      center:{lat: 54.516246, lng:-6.058010599999989},
                      population:40000
                  },
                  portadown: {
                      center:{lat: 54.420333, lng:-6.454839},
                      population:30000
                  },
                  bangor: {
                      center:{lat: 54.643786, lng:-5.624201},
                      population:20000
                  }
              };
  
              //Called on page load by callback attribute in Google Maps API script source
              function initMap() {
                  map = new google.maps.Map(mapDiv, {
                          center:{lat:54.605035,lng:-5.832087},
                          zoom:8
                      });
  
                  for (place in placesMap) {
                      var placeCircle = new google.maps.Circle({
                          strokeColor: '#FF0000',
                          strokeOpacity: 0.8,
                          strokeWeight: 2,
                          fillColor: '#FF0000',
                          fillOpacity: 0.35,
                          map: map,
                          center:placesMap[place].center,
                          radius: Math.sqrt(placesMap[place].population) * 100
                      });
                  }
              }
          &lt;/script&gt;
  &lt;!-- Google api script --&gt;
  &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=MyKeyRemoved&amp;callback=initMap"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>