9 Reorganizing our page with columns

Before we do anything, we need to get some of that map JavaScript out of the way so we can just deal with nice, clean HTML. Reoganize your details.html to push the <script> tag under the end of the container. That way we can push around the map and the school details and everything without accidentally breaking the JavaScript.

{% block content %}
<div class="container">
  <div id='map' style='width: 400px; height: 300px;'></div>
  <p><strong>School type:</strong> {{ school.SCH_TYPE }}</p>
  <p></p>
  <p></p>
</div>
<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoianNvbWEiLCJhIjoibFJmYl9JWSJ9.AUm8d76cbOvVEn2mMeG_ZA';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [-74, 40.71],
    zoom: 9
  });
  map.on('load', function() {
    var geojsonData = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [{{ school.longitude }}, {{ school.latitude }}]
        }
      }]
    };
    map.addLayer({
      "id": "points",
      "type": "circle",
      "source": {
        "type": "geojson",
        "data": geojsonData
      },
      "paint": {
        "circle-radius": 5,
        "circle-color": "#ECCB2F",
        "circle-stroke-width": 1,
        "circle-stroke-color": "black"
      }
    })
  })
</script>
{% endblock %}

9.1 Columns and rows

The layout system of Bootstrap is organized using (very wordy) columns and rows. You can read more here, but what we’re going to do below is break our content into two columns - data on the left, map on the right.

<div class="container">
  <div class="row">
    <div class="col">
      <p><strong>School type:</strong> {{ school.SCH_TYPE }}</p>
      <p></p>
      <p></p>        
    </div>
    <div class="col">
      <div id='map' style='width: 100%; height: 300px;'></div>
    </div>
  </div>
</div>

If you’d like mor edetails about how this works, read up on the Bootstrap grid system.