Bootstrap web map template

<!doctype html>
<html lang="en">

<title>MAP673 Lesson 06</title>

#about {
      max-height: calc(80vh);
      overflow-y: scroll;
    }

/* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
      #map {
        height: calc(60vh);
      }
    }

/* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {

#map {
        height: calc(80vh);
      }
    }

/* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {}
  </style>

</head>

<body>

<div class="container-fluid">
    <header class="row py-3 bg-dark text-white">
      <div class="col mx-2">
        <h1 class="h1">Map title</h1>
      </div>
    </header>

<section class="row bg-secondary">
      <div class="col-12 col-md-7 col-lg-8 px-0">
        <div id="map" class="bg-light position-relative"></div>
      </div>
      <aside id="about" class="col-12 col-md-5 col-lg-4 text-dark py-2">
        <section>
          <h2 class="h2 text-dark">About this map</h2>
          <p>A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We're not trying to teach you
            a thing to copy. We're just here to teach you a technique, then let you loose into the world. We'll put a
            happy little sky in here.</p>
          <p>We'll paint one happy little tree right here. The secret to doing anything is believing that you can do it.
            Anything that you believe you can do strong enough, you can do. Anything. As long as you believe. Let's make
            a nice big leafy tree.</p>
          <p>Lorem Ipsum by <a href="https://www.bobrosslipsum.com/index.html">Bob Ross quotes generator</a>.</p>
          <p>Everything's not great in life, but we can still find beauty in it. I'll go over the colors one more time
            that we use: Titanium white, Thalo green, Prussian blue, Van Dyke brown, Alizarin crimson, Sap green, Cad
            yellow, and Permanent red. Only think about one thing at a time. Don't get greedy. In painting, you have
            unlimited power. You have the ability to move mountains. You can bend rivers. But when I get home, the only
            thing I have power over is the garbage. I get carried away with this brush cleaning.</p>
        </section>
      </aside>
    </section>
    <footer class="row bg-dark text-white py-3">
      <div class="col mx-2">
        <ul class="list-unstyled">
          <li>author</li>
          <li>date</li>
          <li><a href="#">meta data</a></li>
        </ul>
      </div>
    </footer>
  </div>

</html>

https://d3js.org/d3.v5.js

https://unpkg.com/topojson@3