Edit in JSFiddle

$(document).ready(function() {
  "use strict";

  /**
   * The Globe encapsulates the WorldWindow object (wwd) and provides application
   * specific logic for interacting with layers.
   * @param {String} canvasId The ID of the canvas element that will host the globe
   * @returns {Globe}
   */
  class Globe {
    constructor(canvasId) {
      // Create a WorldWindow globe on the specified HTML5 canvas
      this.wwd = new WorldWind.WorldWindow(canvasId);

      // Holds the next unique id to be assigned to a layer
      this.nextLayerId = 1;

      // Add a BMNGOneImageLayer background layer. We're overriding the default 
      // minimum altitude of the BMNGOneImageLayer so this layer always available.
      this.addLayer(new WorldWind.BMNGOneImageLayer(), {
        category: "background",
        minActiveAltitude: 0
      });
    }

    /**
     * Adds a layer to the globe. Applies the optional options' properties to the
     * layer, and assigns the layer a unique ID and category.
     * @param {WorldWind.Layer} layer
     * @param {Object|null} options E.g., {category: "base", enabled: true}
     */
    addLayer(layer, options) {
      // Copy all properties defined on the options object to the layer
      if (options) {
        for (let prop in options) {
          if (!options.hasOwnProperty(prop)) {
            continue; // skip inherited props
          }
          layer[prop] = options[prop];
        }
      }
      // Assign a default category property if not already assigned
      if (typeof layer.category === 'undefined') {
        layer.category = 'overlay'; // the default category
      }

      // Assign a unique layer ID to ease layer management 
      layer.uniqueId = this.nextLayerId++;

      // Add the layer to the globe
      this.wwd.addLayer(layer);
    }

    /**
     * Returns a new array of layers in the given category.
     * @param {String} category E.g., "base", "overlay" or "setting".
     * @returns {Array}
     */
    getLayers(category) {
      return this.wwd.layers.filter(layer => layer.category === category);
    }
  }

  // Create a globe
  let globe = new Globe("globe-canvas");

  // Add layers to the globe 
  globe.addLayer(new WorldWind.BMNGLayer(), {
    category: "base"
  });
  globe.addLayer(new WorldWind.CoordinatesDisplayLayer(globe.wwd), {
    category: "setting"
  });
  globe.addLayer(new WorldWind.ViewControlsLayer(globe.wwd), {
    category: "setting"
  });
  globe.addLayer(new WorldWind.CompassLayer(), {
    category: "setting",
    enabled: false
  });


  // Auto-collapse the main menu when its button items are clicked
  $('.navbar-collapse a[role="button"]').click(function() {
    $('.navbar-collapse').collapse('hide');
  });

  // Collapse card ancestors when the close icon is clicked
  $('.collapse .close').on('click', function() {
    $(this).closest('.collapse').collapse('hide');
  });
});
<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>WorldWindJS Example</title>

    <!-- Bootstrap 4.0 CSS compiled and minified -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Font Awesome icons (see: https://fontawesome.com/icons?d=gallery) -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

    <!-- Custom styles and overrides -->
    <link href="custom.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">

      <!--Branding icon and text-->
      <a class="navbar-brand" href="https://worldwind.arc.nasa.gov/web target=_blank">
                <img src="images/nasa-logo_32.png" width="30" height="30" class="d-inline-block align-top" alt="">
                WorldWindJS
            </a>

      <!--Hamburger menu displayed on small screens/windows-->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <!--Main menu content-->
      <div class="collapse navbar-collapse" id="main-menu">
        <ul class="navbar-nav mr-auto">
          <!--Layers-->
          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" href="#layers" role="button">
                            <span class="fas fa-list" aria-hidden="true"></span>
                            <span class="d-md-none d-lg-inline" aria-hidden="true">Layers</span>
                        </a>
          </li>
          <!--Markers-->
          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" href="#markers" role="button">
                            <span class="fas fa-map-marker-alt" aria-hidden="true"></span>
                            <span class="d-md-none d-lg-inline" aria-hidden="true">Markers</span>
                        </a>
          </li>
          <!--Settings-->
          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" href="#settings" role="button">
                            <span class="fas fa-cog" aria-hidden="true"></span>
                            <span class="d-md-none d-lg-inline" aria-hidden="true">Settings</span>
                        </a>
          </li>
        </ul>
        <!--Search Box-->
        <div class="form-inline">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" data-toggle="modal" data-target="#preview-dialog">
                        <span class="fas fa-search" aria-hidden="true"></span>
                    </button>
        </div>
      </div>
    </nav>
    <!-- Use container-fluid for 100% width and set padding to 0 -->
    <main role="main" class="container-fluid p-0">
      <!-- Globe -->
      <div id="globe" class="globe">
        <!--.d-block ensures the size is correct (prevents a scrollbar from appearing)-->
        <canvas id="globe-canvas" class="d-block" style="width: 100%; height: 100%; 
                        background-color: rgb(36,74,101);">
                    Try Chrome or FireFox.
                </canvas>
      </div>

      <!--Panels-->
      <div class="globe-overlay noninteractive w-100">
        <div class="card-columns">
          <!--Layers-->
          <div class="collapse" id="layers">
            <div class="card globe-card interactive">
              <div class="card-header">
                <h5 class="card-title">
                  <span class="fas fa-list" aria-hidden="true"></span> Layers
                  <button type="button" class="close pull-right" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button></h5>
              </div>
              <div class="card-body">
                <p class="card-text">Layer list goes here.</p>
              </div>
            </div>
          </div>
          <!--Markers-->
          <div class="collapse" id="markers">
            <div class="card globe-card interactive">
              <div class="card-header">
                <h5 class="card-title">
                  <span class="fas fa-map-marker-alt" aria-hidden="true"></span> Markers
                  <button type="button" class="close pull-right" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button></h5>
              </div>
              <div class="card-body">
                <p class="card-text">Marker list goes here.</p>
              </div>
            </div>
          </div>
          <!--Settings-->
          <div class="collapse" id="settings">
            <div class="card globe-card interactive">
              <div class="card-header">
                <h5 class="card-title">
                  <span class="fas fa-cog" aria-hidden="true"></span> Settings
                  <button type="button" class="close pull-right" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button></h5>
              </div>
              <div class="card-body">
                <p class="card-text">Settings go here.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Search Preview Dialog-->
      <div id="preview">
        <div id="preview-dialog" class="modal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Search Results</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
              </div>
              <div class="modal-body">
                <p>
                  Search result go here
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Go to</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- JavaScript is placed at the end of the document so the page loads faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/worldwindjs@1.5.90/build/dist/worldwind.min.js"></script>
    <script src="app.js"></script>
  </body>

</html>
body {
  /*Account for the height of the navbar component*/
  padding-top: 3.5rem;
}

/*Sets the size and style of the globe container*/

.globe {
  width: 100%;
  height: calc(100vh - 3.5rem);
  background-color: black;
}

/*Sets the position of a container displayed over the globe container*/

.globe-overlay {
  position: absolute;
  width: 100%;
  top: 3.5rem;
}

Sets the background color of Cards displayed over the globe .globe-card {
  background: rgba(255, 255, 255, 0.7);
}

/*When the modal fills the screen it has no margin on top and bottom*/

/*Centers the modal*/

.modal-dialog {
  margin: 0 auto;
}

/*Sets the maximum height of the entire modal to 100% of the screen height*/

.modal-content {
  max-height: 100vh;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/

.modal-body {
  max-height: 90vh;
}

/*Sets the height of a modal's canvas to 30% or 200px*/

.modal-body-canvas {
  max-height: 200px;
  height: 30vh;
}

/*Sets the height of a modal's canvas to 60% minus the height of a footer*/

.modal-body-table {
  max-height: calc(60vh - 71px);
  overflow-y: auto;
}

/* Prevents an element, like a <div/> from consuming user input */

.noninteractive {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  pointer-events: none;
}

/* Allows an element to receive user input */

/* Useful if a parent element is using .noniteractive */

.interactive {
  -webkit-touch-callout: auto !important;
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  -o-user-select: auto !important;
  pointer-events: auto !important;
}