slayer master choice

css/style.css

@@ -0,0 +1,33 @@
+.n-nav-justified {
+    width: 100%;
+}
+
+.n-nav {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+}
+.n-nav {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+}
+
+.n-nav-justified > li {
+    display: table-cell;
+    width: 1%;
+}
+.n-nav-justified > li {
+    float: none;
+}
+.n-nav-pills > li {
+    float: left;
+}
+.n-nav > li {
+    position: relative;
+    display: block;
+}

data/chaeldar.json

@@ -110,9 +110,9 @@
     "taskweight": 11
   },
   {
-    "monster": "Greater demons1",
+    "monster": "Greater demons",
     "slayer_req": 9,
-    "taskweight": ""
+    "taskweight": 1
   },
   {
     "monster": "Harpie Bug Swarms",

index.html

@@ -21,11 +21,15 @@
 </div>
   
 <div class="container">
-    <ul class="nav nav-pills nav-justified">
+    <ul class="nav nav-tabs justify-content-center mx-auto ">
-        <li class="active"><a href="#">Krystilia</a></li>
+        <li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#" onclick="applyChanges('krystilia');return false;">Krystilia</a></li>
-        <li><a href="#">Menu 1</a></li>
+        <li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('turael');return false;">Turael</a></li>
-        <li><a href="#">Menu 2</a></li>
+        <li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('mazchna');return false;">Mazchna</a></li>
-        <li><a href="#">Menu 3</a></li>
+        <li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('vannaka');return false;">Vannaka</a></li>
+        <li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('konar');return false;">Konar quo Maten</a></li>
+        <li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('chaeldar');return false;">Chaeldar</a></li>
+        <li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('nieve');return false;">Nieve/Steve</a></li>
+        <li><a data-toggle="tab" class="nav-link" href="#" onclick="applyChanges('duradel');return false;">Duradel</a></li>
     </ul>
     <div class="row"> 
         <div class="col">