Migrating to Bootstrap v4 caused a table to disappear

I wrote my code in Bootstrap v3, however, upon realising that it doesn’t support Spinners and many of the CSS elements I’ve envisioned didn’t have the style that I wanted, I want to switch to Bootstrap v4. I added all of the required scripts / css links to the head, however I noticed that one whole table from my code has frankly just disappeared. And I have no idea why. The table is on a separate html element, and works in Bootstrap v3 but not sure why it’s not displaying with v4.

Code:

main2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

  <style>
  </style>
</head>
<body>
  <div id="header" style="background-color: white; width:100%; height:auto; position:fixed;">
    <p id="statusText">Preparing supermarkets from Google Drive...</p>

    <div id="form-group">
      <input type="text" class="form-control" id="searchInput" placeholder="Search by Name or ID of Supermarket"/> 
    </div> 
  </div>

    <!-- <div class="d-flex justify-content-center align-items-center" style="visibility:hidden;">
    <div class="spinner-border" id="spinner" role="status">
    </div> -->
  </div>

    <div class="container">
      <div id="addsupermarket" style="" class="">
      </div>

  <div id="foot" style="background-color:white; width:100%; height:auto; position:fixed; top:447px;">
    <button type="button" class="btn btn-primary" style="float:right;" id="btnAdd">Add Supermarkets</button>
  </div>




  
  <script>  
    var data;
    var checkedItems = new Map();

    function loadView(options) {
      var id = typeof options.id === "undefined" ? "addsupermarket" : options.id;
      var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
      google.script.run.withSuccessHandler(function(html) {
        document.getElementById("addsupermarket").innerHTML = html;
        typeof options.params === "undefined" ? cb() : cb(options.params);

      })[options.func]();
    }
    function setDataForSearch() {
      checkedItems = new Map();
      showSpinner();
      document.getElementById("statusText").innerHTML = "Loading..."
      google.script.run.withSuccessHandler(function(dataReturned) {
        data = dataReturned.slice();
        var searchResultsBox = document.getElementById("searchResults");
        var templateBox = document.getElementById("rowTemplate");
        var template = templateBox.content;

        data.forEach(function(r) {
        var tr = template.cloneNode(true);
        var supermarketCheckColumn = tr.querySelector(".supermarketCheck");
        var supermarketNameColumn = tr.querySelector(".supermarketName");
        var supermarketIDColumn = tr.querySelector(".supermarketID");
        var supermarketStatusColumn = tr.querySelector(".supermarketStatus");
        var supermarketCheckbox = tr.querySelector(".supermarketCheckbox");
        supermarketNameColumn.textContent = r[0];
        supermarketIDColumn.textContent = r[1];
        supermarketStatusColumn.textContent = r[2];
        supermarketCheckbox.dataset.supermarketID = r[1];
        searchResultsBox.appendChild(tr);
        });
        document.getElementById("statusText").innerHTML = "Found " + data.length + " results";
        hideSpinner();
      }).getDataForSearch();
    }

    function loadAddSupermarketView() {
      loadView({func: "loadAddSupermarketView", callback: setDataForSearch});
    }
    loadAddSupermarketView();
    document.getElementById("searchInput").addEventListener("input", inputEventHandler);
    function inputEventHandler(e) {
      if (e.target.matches("#searchInput")) {
        search();
      }
    }

    function showSpinner() {
      document.getElementById("spinner").style.visibility = "visible";
    }

    function hideSpinner() {
      document.getElementById("spinner").style.visibility = "hidden";
    }
    
    function search() {
      var searchInput = document.getElementById("searchInput").value;
      var resultsArray = data.filter(function(r) {
        return (r[0].toString().toLowerCase().indexOf(searchInput.toString().toLowerCase()) !== -1 || (r[1].toString().indexOf(searchInput.toString()) !== -1));
      });
      document.getElementById("statusText").innerHTML = "Loading..."
      var searchResultsBox = document.getElementById("searchResults");
      var templateBox = document.getElementById("rowTemplate");
      var template = templateBox.content;
      searchResultsBox.innerHTML = "";
      resultsArray.forEach(function(r) {
        var tr = template.cloneNode(true);
        var supermarketCheckbox = tr.querySelector(".supermarketCheckbox");
        var supermarketCheckColumn = tr.querySelector(".supermarketCheck");
        var supermarketNameColumn = tr.querySelector(".supermarketName");
        var supermarketIDColumn = tr.querySelector(".supermarketID");
        var supermarketStatusColumn = tr.querySelector(".supermarketStatus");
        supermarketCheckbox.dataset.supermarketID = r[1];
        supermarketNameColumn.textContent = r[0];
        supermarketIDColumn.textContent = r[1];
        supermarketStatusColumn.textContent = r[2];
        searchResultsBox.appendChild(tr);
        });
        document.getElementById("statusText").innerHTML = "Found " + resultsArray.length + " results";      
    }
  </script>
</body>
</html>

addsupermarket.html (which contains the table)

<table class="table">
  <thead>
    <tr>
      <th scope="col">Add?</th>
      <th scope="col">Name</th>
      <th scope="col">ID</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody id="searchResults">
  </tbody>
</table>