Implemented my own tab code, so bootstrap could be removed.

common/main.css

@@ -26,6 +26,7 @@ body{
   background-color: var(--background-color);
   color: var(--text-color);
   font-size: 1.1rem;
+  margin: 0;
 }
 body.theme-dark {
   --background-color: var(--dark-background-color);
@@ -218,34 +219,10 @@ h4 {
   .hiddendiv {
   display:none;
 }
-.nav-link {
-  font-weight: 600;
-  transition: 0.3s;
-}
-.nav-link:hover {
-  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
-}
-
-.button4:hover {
-  background-color: #e7e7e7;
-}
-
 .status-div{
   color: #ffffffa2;
 }
-.nav-pills .nav-link{
+
-  border-radius: .25rem;
-  color: var(--text-accent-color);
-}
-.nav-pills .nav-link.active{
-  color: #fff;
-  background-color: var(--button-color);
-}
-.nav-link:focus{
-  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  outline: none;
-  box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; 
-}
 .result-div{
   width: max-content;
   margin: auto;
@@ -316,7 +293,46 @@ h4 {
   outline: none;
   box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
 }
+.tab-list{
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  align-items: center;
+}
+.tab{
+  margin: 0.2rem;
+}
+.tab-button{
+  display: block;
+  padding: 0.5rem 1rem;
+  border-radius: .25rem;
+  text-decoration: none;
+  font-weight: 600;
+  transition: 0.3s;
+  color: var(--text-accent-color);
+}
+.tab-button.active{
+  color: #fff;
+  background-color: var(--button-color); 
 
+}
+.tab-button:focus {
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  outline: none;
+  box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
+}
+.tab-button:hover {
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
+}
+.tab-content{
+ display: none; 
+}
+.tab-content.active{
+  display: block;
+}
 
 @media only screen and (max-width: 600px) {
   header {
@@ -344,6 +360,13 @@ h4 {
     align-self: flex-start;
     width: 100%;
   }
+  .tab-list{
+    padding: 0;
+    justify-content: space-around;
+  }
+  .tab-button{
+    padding: 0.5rem;
+  }
   .ResultTable{
     width: 100%;
     margin: 0px;
@@ -392,4 +415,18 @@ h4 {
         --tr-color: var(--tr-color-dark);
         --button-color: var(--button-color-dark);
     }
-}
+}
+.alert-div{
+  color: #664d03;
+  background-color: #fff3cd;
+  border-color: #ffecb5;
+  position: relative;
+  padding: 1rem 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-radius: .25rem;
+}

index.php

@@ -7,7 +7,6 @@
   <title>Liveresultater</title>
 
   <link rel="icon" type="image/png" href="./common/kok-144x144.png">
-  <link rel="stylesheet" href="common/bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" href="common/main.css">
 </head>
 
@@ -34,19 +33,19 @@
   </div>
 </header>
 
-  <div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert">
+  <ul class="tab-list" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
-    Du har mistet kontakten med serveren. Last inn sida på nytt får å koble til igjen <button type="button" class="btn btn-warning" onclick="location.reload()">Last inn på nytt</button>
+    <li class="tab" role="presentation">
-  </div>
+      <a class="tab-button active" id="alle-tab" data-toggle="tab" href="#alle" onclick="changeTab('alle')" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
-
-  <ul class="container nav nav-pills bd-highlight" id="classes-tabs" role="tablist" style="margin-bottom: 1rem; margin-top: 1rem;">
-    <li class="nav-item" role="presentation">
-      <a class="nav-link active" id="alle-tab" data-toggle="tab" href="#alle" role="tab" aria-controls="alle" aria-selected="true">Alle klasser</a>
     </li>
 
   </ul>
 
-  <div class="tab-content" id="classes-tab-content">
+  <div class="container alert alert-warning hiddendiv" role="alert" id="ConnectionAlert">
-    <div class="tab-pane fade show active" id="alle" role="tabpanel" aria-labelledby="alle">
+    Du har mistet kontakten med serveren. Last inn sida på nytt får å koble til igjen <button type="button" class="btn btn-warning" onclick="location.reload()">Last inn på nytt</button>
+  </div>
+
+  <div class="tab-container" id="classes-tab-content">
+    <div class="tab-content active" id="alle" role="tabpanel" aria-labelledby="alle">
       <div class="all-result" id="alle-cont"></div>
     </div>
   </div>
@@ -55,6 +54,6 @@
 
 
   <script src="liveresults.js"></script>
-  <script src="common/bootstrap/js/bootstrap.min.js"></script>
+  <script src="ui.js"></script>
 </body>
 </html>

liveresults.js

@@ -2,10 +2,8 @@ var tabsCreated = false;
 
 function createTabs(tabArray, tabNameArray) {
   for (let i = 0; i < tabArray.length; i++) {
-    let startStrTab = '<li class="nav-item" role="presentation"><a class="nav-link" role="tab" data-toggle="tab"'
+    let StrTab = `<li class="tab" role="presentation"><a class="tab-button" role="tab" data-toggle="tab" onclick="changeTab('${tabArray[i]}')" id="${tabArray[i]}-tab" href="#${tabArray[i]}" aria-controls="${tabArray[i]}" aria-selected="false">${tabNameArray[i].Class.Name}</a></li>`;
-    //console.log(tabNameArray)
+    let StrCont = '<div class="tab-content" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
-    let StrTab = startStrTab + 'id="' + tabArray[i] + '-tab" href="#' + tabArray[i] + '" aria-controls="' + tabArray[i] + '" aria-selected="false">' + tabNameArray[i].Class.Name + '</a></li>';
-    let StrCont = '<div class="tab-pane fade show" id="' + tabArray[i]+'" role="tabpanel" aria-labelledby="' + tabArray[i] + '-tab"></div>'
     document.getElementById("classes-tabs").innerHTML += StrTab;
     document.getElementById("classes-tab-content").innerHTML += StrCont;
     tabsCreated = true;
@@ -287,30 +285,3 @@ function showHideSplits(className) {
 } 
 
 var interval = setInterval(checkConnection, 10000);
-
-//theme
-function applyTheme(theme) {
-    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
-    document.body.classList.add(`theme-${theme}`);
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-   document.querySelector("#theme").addEventListener("change", function() {
-        applyTheme(this.value);
-   });
-});
-
-document.addEventListener("DOMContentLoaded", () => {
-  const savedTheme = localStorage.getItem("theme") || "auto";
-
-  applyTheme(savedTheme);
-
-  for (const optionElement of document.querySelectorAll("#theme option")) {
-      optionElement.selected = savedTheme === optionElement.value;
-  }
-
-  document.querySelector("#theme").addEventListener("change", function () {
-      localStorage.setItem("theme", this.value);
-      applyTheme(this.value);
-  });
-});

ui.js

@@ -0,0 +1,43 @@
+function changeTab(selected){
+	let selectElement = document.getElementById(selected);
+	if (!selectElement.classList.contains('active')) {
+		let tabContList = document.getElementsByClassName('tab-content active');
+		let tabBtnList = document.getElementsByClassName('tab-button active');
+		let selectTabBtn = document.getElementById(`${selected}-tab`);
+
+		if (tabContList[0]) {
+			tabContList[0].classList.remove('active');
+			tabBtnList[0].classList.remove('active');
+		}
+		selectElement.classList.add('active');
+		selectTabBtn.classList.add('active');
+};		
+};
+
+//theme
+function applyTheme(theme) {
+    document.body.classList.remove("theme-auto", "theme-light", "theme-dark");
+    document.body.classList.add(`theme-${theme}`);
+}
+ 
+document.addEventListener("DOMContentLoaded", () => {
+   document.querySelector("#theme").addEventListener("change", function() {
+        applyTheme(this.value);
+   });
+});
+ 
+document.addEventListener("DOMContentLoaded", () => {
+  const savedTheme = localStorage.getItem("theme") || "auto";
+ 
+  applyTheme(savedTheme);
+ 
+  for (const optionElement of document.querySelectorAll("#theme option")) {
+      optionElement.selected = savedTheme === optionElement.value;
+  }
+ 
+  document.querySelector("#theme").addEventListener("change", function () {
+      localStorage.setItem("theme", this.value);
+      applyTheme(this.value);
+  });
+});
+