diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index cef6d85375..c1e251d961 100644
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -21,6 +21,7 @@
 <script src="assets/bootstrap-4.5.2-dist/js/bootstrap.bundle.min.js"></script>
 <script src="assets/Simple-Jekyll-Search-1.0.8/dest/jekyll-search.js"></script>
 <script src="assets/jekyll-table-of-contents/toc.js"></script>
+<script src="js/tabstate.js"></script>
 <script src="{{ "js/customscripts.js" }}"></script>
 
 <link rel="shortcut icon" href="{{ "images/favicon.ico"  }}" type="image/x-icon">
diff --git a/docs/js/customscripts.js b/docs/js/customscripts.js
index d1a0c0c4bc..35e53e155b 100644
--- a/docs/js/customscripts.js
+++ b/docs/js/customscripts.js
@@ -22,36 +22,3 @@ $( document ).ready(function() {
     anchors.add('h2,h3,h4,h5');
 
 });
-
-// needed for nav tabs on pages. See Formatting > Nav tabs for more details.
-// script from http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload
-$(function() {
-    var json, tabsState;
-    $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
-        var href, json, parentId, tabsState;
-
-        tabsState = localStorage.getItem("tabs-state");
-        json = JSON.parse(tabsState || "{}");
-        parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
-        href = $(e.target).attr('href');
-        json[parentId] = href;
-
-        return localStorage.setItem("tabs-state", JSON.stringify(json));
-    });
-
-    tabsState = localStorage.getItem("tabs-state");
-    json = JSON.parse(tabsState || "{}");
-
-    $.each(json, function(containerId, href) {
-        if (containerId && containerId !== "undefined") {
-            $("#" + containerId + " a[href=" + href + "]").tab('show');
-        }
-    });
-
-    $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
-        var $this = $(this);
-        if (!json[$this.attr("id")]) {
-            return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
-        }
-    });
-});
diff --git a/docs/js/tabstate.js b/docs/js/tabstate.js
new file mode 100644
index 0000000000..529dcc5bb3
--- /dev/null
+++ b/docs/js/tabstate.js
@@ -0,0 +1,43 @@
+// needed for nav tabs on pages. See Formatting > Nav tabs for more details.
+// script from http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload
+(function() {
+    var registerTabEvent = function() {
+        $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
+            var tabId, json, parentId, tabsState;
+
+            tabsState = localStorage.getItem("tabs-state");
+            json = JSON.parse(tabsState || "{}");
+            parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
+            tabId = $(e.target).attr('id');
+            json[parentId] = tabId;
+
+            return localStorage.setItem("tabs-state", JSON.stringify(json));
+        });
+    };
+
+    document.addEventListener('DOMContentLoaded', function () {
+        var json, tabsState;
+        tabsState = localStorage.getItem("tabs-state");
+        json = JSON.parse(tabsState || "{}");
+
+        $.each(json, function(containerId, tabId) {
+            if (containerId && containerId !== "undefined" && tabId && tabId !== "undefined"
+                && tabId.indexOf('#') !== 0) {
+                $("#" + tabId).tab('show');
+            }
+        });
+
+        $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
+            var $this = $(this);
+            if (!json[$this.attr("id")]) {
+                return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
+            }
+        });
+
+        // cleanup "undefined" entries
+        delete json['undefined'];
+        localStorage.setItem("tabs-state", JSON.stringify(json));
+
+        registerTabEvent();
+    });
+})();
diff --git a/docs/pages/pmd/userdocs/installation.md b/docs/pages/pmd/userdocs/installation.md
index 7339d1b986..049fd97564 100644
--- a/docs/pages/pmd/userdocs/installation.md
+++ b/docs/pages/pmd/userdocs/installation.md
@@ -71,13 +71,17 @@ Additionally, the following options, are specified most of the time even though
 
 
 <div class="text-left">
-  <ul class="nav nav-tabs" role="tablist">
-    <li role="presentation" class="active"><a href="#linux" aria-controls="linux / unix" role="tab" data-toggle="tab">Linux / Unix</a></li>
-    <li role="presentation"><a href="#windows" aria-controls="windows" role="tab" data-toggle="tab">Windows</a></li>
+  <ul class="nav nav-tabs" role="tablist" id="pmd-sample-usage-tabs">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" id="linux-tab" data-toggle="tab" href="#linux" role="tab" aria-controls="linux" aria-selected="true">Linux / Unix</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="windows-tab" data-toggle="tab" href="#windows" role="tab" aria-controls="windows" aria-selected="false">Windows</a>
+    </li>
   </ul>
  
-  <div class="tab-content">
-    <div role="tabpanel" class="tab-pane active" id="linux">
+  <div class="tab-content border">
+    <div class="tab-pane fade show active" id="linux" role="tabpanel" aria-labelledby="linux-tab">
 <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">~ $ </span><span class="s2">cd</span> ~/bin/pmd-bin-{{site.pmd.version}}/bin
 <span class="gp">~/.../bin $ </span><span class="s2">./run.sh</span> pmd -d ../../../src/main/java/ -f text -R rulesets/java/quickstart.xml
   
@@ -87,7 +91,7 @@ Additionally, the following options, are specified most of the time even though
   .../src/main/java/com/me/RuleSet.java:357  These nested if statements could be combined
   .../src/main/java/com/me/RuleSetWriter.java:66     Avoid empty catch blocks</code></pre></figure>
     </div>
-    <div role="tabpanel" class="tab-pane" id="windows">
+    <div class="tab-pane fade" id="windows" role="tabpanel" aria-labelledby="windows-tab">
 <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">C:\ &gt; </span><span class="s2">cd</span> C:\pmd-bin-{{site.pmd.version}}\bin
 <span class="gp">C:\...\bin > </span><span class="s2">.\pmd.bat</span> -d ..\..\src\main\java\ -f text -R rulesets/java/quickstart.xml
       
@@ -124,13 +128,17 @@ There are two required parameters:
 
 
 <div class="text-left">
-  <ul class="nav nav-tabs" role="tablist">
-    <li role="presentation" class="active"><a href="#cpd-linux" aria-controls="linux / unix" role="tab" data-toggle="tab">Linux / Unix</a></li>
-    <li role="presentation"><a href="#cpd-windows" aria-controls="windows" role="tab" data-toggle="tab">Windows</a></li>
+  <ul class="nav nav-tabs" role="tablist" id="cpd-sample-usage-tabs">
+    <li class="nav-item" role="presentation">
+      <a class="nav-link active" id="cpd-linux-tab" data-toggle="tab" href="#cpd-linux" role="tab" aria-controls="cpd-linux" aria-selected="true">Linux / Unix</a>
+    </li>
+    <li class="nav-item" role="presentation">
+      <a class="nav-link" id="cpd-windows-tab" data-toggle="tab" href="#cpd-windows" role="tab" aria-controls="windows" aria-selected="false">Windows</a>
+    </li>
   </ul>
 
-  <div class="tab-content">
-    <div role="tabpanel" class="tab-pane active" id="cpd-linux">
+  <div class="tab-content border">
+    <div class="tab-pane fade show active" id="cpd-linux" role="tabpanel" aria-labelledby="cpd-linux-tab">
 <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">~ $ </span><span class="s2">cd</span> ~/bin/pmd-bin-{{site.pmd.version}}/bin
 <span class="gp">~/.../bin $ </span><span class="s2">./run.sh</span> cpd --minimum-tokens 100 --files /home/me/src
 
@@ -146,7 +154,7 @@ There are two required parameters:
           assertEquals(Boolean.TYPE, expressions.get(index++).getType());
           assertEquals(Boolean.TYPE, expressions.get(index++).getType());</code></pre></figure>
     </div>
-    <div role="tabpanel" class="tab-pane" id="cpd-windows">
+    <div class="tab-pane fade" id="cpd-windows" role="tabpanel" aria-labelledby="cpd-windows-tab">
 <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="gp">C:\ &gt; </span><span class="s2">cd</span> C:\pmd-bin-{{site.pmd.version}}\bin
 <span class="gp">C:\...\bin > </span><span class="s2">.\cpd.bat</span> --minimum-tokens 100 --files c:\temp\src