j1-template 2023.0.17 → 2023.1.0

data/lib/starter_web/pages/public/previewer/preview_bootstrap_theme.adoc

@@ -113,8 +113,9 @@ resource_options:
 [role="dropcap"]
 JekyllOne is a theme for multifunctional Bootstrap-based and responsive
 websites, and offers various unique functionalities compared to other themes
-and templates for Jekyll. Themes for Bootstrap are used to customize the appearance
-of a website based on the basic rules and definitions of Bootstrap's CSS styles.
+and templates for Jekyll. Themes for Bootstrap are used to customize the
+appearance of a website based on the basic rules and definitions of Bootstrap's
+CSS styles.
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
@@ -151,7 +152,7 @@ colors. Then, customize with `.bg-*` utilities.
 <div class="doc-example mb-3">
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
     <div class="container-fluid">
-      <a class="link-no-decoration navbar-brand" href="#">Navbar</a>
+      <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
         data-bs-target="#navbarColor01" aria-controls="navbarColor01"
         aria-expanded="false" aria-label="Toggle navigation">
@@ -161,28 +162,28 @@ colors. Then, customize with `.bg-*` utilities.
       <div class="collapse navbar-collapse ml-2" id="navbarColor01">
         <ul class="navbar-nav me-auto">
           <li class="nav-item">
-            <a class="link-no-decoration nav-link active" href="#">Home
+            <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
               <span class="visually-hidden">(current)</span>
             </a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">Features</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">Pricing</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">About</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
           </li>
           <li class="nav-item dropdown">
             <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
-              href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+              href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu">
-              <a class="link-no-decoration dropdown-item" href="#">Action</a>
-              <a class="link-no-decoration dropdown-item" href="#">Another action</a>
-              <a class="link-no-decoration dropdown-item" href="#">Something else here</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
               <div class="dropdown-divider"></div>
-              <a class="link-no-decoration dropdown-item" href="#">Separated link</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
             </div>
           </li>
         </ul>
@@ -196,7 +197,7 @@ colors. Then, customize with `.bg-*` utilities.
 
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
     <div class="container-fluid">
-      <a class="link-no-decoration navbar-brand" href="#">Navbar</a>
+      <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
         data-bs-target="#navbarColor02" aria-controls="navbarColor02"
         aria-expanded="false" aria-label="Toggle navigation">
@@ -206,28 +207,28 @@ colors. Then, customize with `.bg-*` utilities.
       <div class="collapse navbar-collapse ml-2" id="navbarColor02">
         <ul class="navbar-nav me-auto">
           <li class="nav-item">
-            <a class="link-no-decoration nav-link active" href="#">Home
+            <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
               <span class="visually-hidden">(current)</span>
             </a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">Features</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">Pricing</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">About</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
           </li>
           <li class="nav-item dropdown">
             <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
-              href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+              href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu">
-              <a class="link-no-decoration dropdown-item" href="#">Action</a>
-              <a class="link-no-decoration dropdown-item" href="#">Another action</a>
-              <a class="link-no-decoration dropdown-item" href="#">Something else here</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
               <div class="dropdown-divider"></div>
-              <a class="link-no-decoration dropdown-item" href="#">Separated link</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
             </div>
           </li>
         </ul>
@@ -242,7 +243,7 @@ colors. Then, customize with `.bg-*` utilities.
 
   <nav class="navbar navbar-expand-lg navbar-light md-light">
     <div class="container-fluid">
-      <a class="link-no-decoration navbar-brand" href="#">Navbar</a>
+      <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
         data-bs-target="#navbarColor03" aria-controls="navbarColor03"
         aria-expanded="false" aria-label="Toggle navigation">
@@ -252,28 +253,28 @@ colors. Then, customize with `.bg-*` utilities.
       <div class="collapse navbar-collapse ml-2" id="navbarColor03">
         <ul class="navbar-nav me-auto">
           <li class="nav-item">
-            <a class="link-no-decoration nav-link active" href="#">Home
+            <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
               <span class="visually-hidden">(current)</span>
             </a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">Features</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">Pricing</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
           </li>
           <li class="nav-item">
-            <a class="link-no-decoration nav-link" href="#">About</a>
+            <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
           </li>
           <li class="nav-item dropdown">
             <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
-              href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+              href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu">
-              <a class="link-no-decoration dropdown-item" href="#">Action</a>
-              <a class="link-no-decoration dropdown-item" href="#">Another action</a>
-              <a class="link-no-decoration dropdown-item" href="#">Something else here</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
               <div class="dropdown-divider"></div>
-              <a class="link-no-decoration dropdown-item" href="#">Separated link</a>
+              <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
             </div>
           </li>
         </ul>
@@ -292,7 +293,7 @@ colors. Then, customize with `.bg-*` utilities.
 ----
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <div class="container-fluid">
-    <a class="link-no-decoration navbar-brand" href="#">Navbar</a>
+    <a class="link-no-decoration navbar-brand" href="javascript:void(0)">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
       data-bs-target="#navbarColor01" aria-controls="navbarColor01"
       aria-expanded="false" aria-label="Toggle navigation">
@@ -302,28 +303,28 @@ colors. Then, customize with `.bg-*` utilities.
     <div class="collapse navbar-collapse ml-2" id="navbarColor01">
       <ul class="navbar-nav me-auto">
         <li class="nav-item">
-          <a class="link-no-decoration nav-link active" href="#">Home
+          <a class="link-no-decoration nav-link active" href="javascript:void(0)">Home
             <span class="visually-hidden">(current)</span>
           </a>
         </li>
         <li class="nav-item">
-          <a class="link-no-decoration nav-link" href="#">Features</a>
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">Features</a>
         </li>
         <li class="nav-item">
-          <a class="link-no-decoration nav-link" href="#">Pricing</a>
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">Pricing</a>
         </li>
         <li class="nav-item">
-          <a class="link-no-decoration nav-link" href="#">About</a>
+          <a class="link-no-decoration nav-link" href="javascript:void(0)">About</a>
         </li>
         <li class="nav-item dropdown">
           <a class="link-no-decoration nav-link dropdown-toggle" data-bs-toggle="dropdown"
-            href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu">
-            <a class="link-no-decoration dropdown-item" href="#">Action</a>
-            <a class="link-no-decoration dropdown-item" href="#">Another action</a>
-            <a class="link-no-decoration dropdown-item" href="#">Something else here</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Action</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Another action</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Something else here</a>
             <div class="dropdown-divider"></div>
-            <a class="link-no-decoration dropdown-item" href="#">Separated link</a>
+            <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Separated link</a>
           </div>
         </li>
       </ul>
@@ -479,8 +480,8 @@ In need of a button having a little menu, buttons with a (nested)
         class="btn btn-primary dropdown-toggle"
         data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">menu</button>
       <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
       </div>
     </div>
   </div>
@@ -492,8 +493,8 @@ In need of a button having a little menu, buttons with a (nested)
         class="btn btn-success dropdown-toggle"
         data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">menu</button>
       <div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
       </div>
     </div>
   </div>
@@ -505,8 +506,8 @@ In need of a button having a little menu, buttons with a (nested)
         class="btn btn-info dropdown-toggle"
         data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">menu</button>
       <div class="dropdown-menu" aria-labelledby="btnGroupDrop3" style="">
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
       </div>
     </div>
   </div>
@@ -518,8 +519,8 @@ In need of a button having a little menu, buttons with a (nested)
         class="btn btn-danger dropdown-toggle"
         data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">menu</button>
       <div class="dropdown-menu" aria-labelledby="btnGroupDrop4" style="">
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
       </div>
     </div>
   </div>
@@ -538,8 +539,8 @@ In need of a button having a little menu, buttons with a (nested)
         aria-expanded="false">menu
       </button>
       <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
-        <a class="link-no-decoration dropdown-item" href="#">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
+        <a class="link-no-decoration dropdown-item" href="javascript:void(0)">Dropdown link</a>
       </div>
     </div>
 </div>
@@ -1220,7 +1221,7 @@ whereas the <h6> tag defines the least important heading in a document.
     </div>
     <div class="col-md-4">
       <h3 class="notoc">Example body text</h2>
-      <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
+      <p>Nullam quis risus eget <a href="javascript:void(0)">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
       <p><small>This line of text is meant to be treated as fine print.</small></p>
       <p>The following is <strong>rendered as bold text</strong>.</p>
       <p>The following is <em>rendered as italicized text</em>.</p>
@@ -1713,21 +1714,21 @@ JavaScript plugin.
       <a class="link-no-decoration nav-link" data-bs-toggle="tab" href="#profile">Profile</a>
     </li>
     <li class="nav-item dropdown">
-      <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+      <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
         role="button"
         aria-haspopup="true" aria-expanded="false">
         Dropdown
       </a>
       <div class="dropdown-menu">
-        <a href="#" class="dropdown-item">Action</a>
-        <a href="#" class="dropdown-item">Another action</a>
-        <a href="#" class="dropdown-item">Something else here</a>
+        <a href="javascript:void(0)" class="dropdown-item">Action</a>
+        <a href="javascript:void(0)" class="dropdown-item">Another action</a>
+        <a href="javascript:void(0)" class="dropdown-item">Something else here</a>
         <div class="dropdown-divider"></div>
-        <a href="#" class="dropdown-item">Separated link</a>
+        <a href="javascript:void(0)" class="dropdown-item">Separated link</a>
       </div>
     </li>
     <li class="nav-item">
-      <a href="#" class="nav-link disabled">Disabled</a>
+      <a href="javascript:void(0)" class="nav-link disabled">Disabled</a>
     </li>
   </ul>
   <div id="myTabContent" class="tab-content">
@@ -1761,23 +1762,23 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
       <h4 class="notoc">Standard Pills</h4>
       <ul class="nav nav-pills">
         <li class="nav-item mr-1 mb-2">
-          <a href="#" class="nav-link active">Active</a>
+          <a href="javascript:void(0)" class="nav-link active">Active</a>
         </li>
         <li class="nav-item dropdown mr-1">
-          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu">
-            <a href="#" class="dropdown-item">Action</a>
-            <a href="#" class="dropdown-item">Another action</a>
-            <a href="#" class="dropdown-item">Something else here</a>
+            <a href="javascript:void(0)" class="dropdown-item">Action</a>
+            <a href="javascript:void(0)" class="dropdown-item">Another action</a>
+            <a href="javascript:void(0)" class="dropdown-item">Something else here</a>
             <div class="dropdown-divider"></div>
-            <a href="#" class="dropdown-item">Separated link</a>
+            <a href="javascript:void(0)" class="dropdown-item">Separated link</a>
           </div>
         </li>
         <li class="nav-item mr-1 mb-2">
-          <a href="#" class="nav-link">Link</a>
+          <a href="javascript:void(0)" class="nav-link">Link</a>
         </li>
         <li class="nav-item mr-1 mb-2">
-          <a href="#" class="nav-link disabled">Disabled</a>
+          <a href="javascript:void(0)" class="nav-link disabled">Disabled</a>
         </li>
       </ul>
     </div>
@@ -1785,23 +1786,23 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
       <h5 class="notoc">Stacked Pills (vertical)</h5>
       <ul class="nav nav-pills flex-column mb-4">
         <li class="nav-item mb-2">
-          <a href="#" class="nav-link active">Active</a>
+          <a href="javascript:void(0)" class="nav-link active">Active</a>
         </li>
         <li class="nav-item dropdown mb-1">
-          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a href="javascript:void(0)" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
           <div class="dropdown-menu">
-            <a href="#" class="dropdown-item">Action</a>
-            <a href="#" class="dropdown-item">Another action</a>
-            <a href="#" class="dropdown-item">Something else here</a>
+            <a href="javascript:void(0)" class="dropdown-item">Action</a>
+            <a href="javascript:void(0)" class="dropdown-item">Another action</a>
+            <a href="javascript:void(0)" class="dropdown-item">Something else here</a>
             <div class="dropdown-divider"></div>
-            <a href="#" class="dropdown-item">Separated link</a>
+            <a href="javascript:void(0)" class="dropdown-item">Separated link</a>
           </div>
         </li>
         <li class="nav-item mb-2">
-          <a href="#" class="nav-link">Link</a>
+          <a href="javascript:void(0)" class="nav-link">Link</a>
         </li>
         <li class="nav-item mb-2">
-          <a href="#" class="nav-link disabled">Disabled</a>
+          <a href="javascript:void(0)" class="nav-link disabled">Disabled</a>
         </li>
       </ul>
     </div>
@@ -1824,12 +1825,12 @@ Separators are automatically added in CSS through ::before and content.
     <li class="breadcrumb-item active">Home</li>
   </ol>
   <ol class="breadcrumb">
-    <li class="breadcrumb-item"><a class="link-no-decoration" href="#">Home</a></li>
+    <li class="breadcrumb-item"><a class="link-no-decoration" href="javascript:void(0)">Home</a></li>
     <li class="breadcrumb-item active">Library</li>
   </ol>
   <ol class="breadcrumb">
-    <li class="breadcrumb-item"><a class="link-no-decoration" href="#">Home</a></li>
-    <li class="breadcrumb-item"><a class="link-no-decoration" href="#">Library</a></li>
+    <li class="breadcrumb-item"><a class="link-no-decoration" href="javascript:void(0)">Home</a></li>
+    <li class="breadcrumb-item"><a class="link-no-decoration" href="javascript:void(0)">Library</a></li>
     <li class="breadcrumb-item active">Data</li>
   </ol>
 </div>
@@ -1850,75 +1851,75 @@ it as a navigation section to screen readers and other assistive technologies.
   <div>
     <ul class="pagination">
       <li class="page-item disabled">
-        <a href="#" class="page-link">&laquo;</a>
+        <a href="javascript:void(0)" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a href="#" class="page-link">1</a>
+        <a href="javascript:void(0)" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">2</a>
+        <a href="javascript:void(0)" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">3</a>
+        <a href="javascript:void(0)" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">4</a>
+        <a href="javascript:void(0)" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">5</a>
+        <a href="javascript:void(0)" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">&raquo;</a>
+        <a href="javascript:void(0)" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
   <div>
     <ul class="pagination pagination-lg">
       <li class="page-item disabled">
-        <a href="#" class="page-link">&laquo;</a>
+        <a href="javascript:void(0)" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a href="#" class="page-link">1</a>
+        <a href="javascript:void(0)" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">2</a>
+        <a href="javascript:void(0)" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">3</a>
+        <a href="javascript:void(0)" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">4</a>
+        <a href="javascript:void(0)" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">5</a>
+        <a href="javascript:void(0)" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">&raquo;</a>
+        <a href="javascript:void(0)" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
   <div>
     <ul class="pagination pagination-sm">
       <li class="page-item disabled">
-        <a href="#" class="page-link">&laquo;</a>
+        <a href="javascript:void(0)" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a href="#" class="page-link">1</a>
+        <a href="javascript:void(0)" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">2</a>
+        <a href="javascript:void(0)" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">3</a>
+        <a href="javascript:void(0)" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">4</a>
+        <a href="javascript:void(0)" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">5</a>
+        <a href="javascript:void(0)" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a href="#" class="page-link">&raquo;</a>
+        <a href="javascript:void(0)" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
@@ -1956,7 +1957,7 @@ link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {brow
       <div class="alert alert-warning alert-dismissible" role="alert">
         <h4 class="alert-heading notoc">Warning!</h4>
         <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
-        <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
+        <a href="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
     </div>
@@ -1964,19 +1965,19 @@ link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {brow
   <div class="row">
     <div class="col-md-4">
       <div class="alert alert-danger alert-dismissible" role="alert">
-        <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few</a> things up and try submitting again.
+        <strong>Oh snap!</strong> <a href="javascript:void(0)" class="alert-link">Change a few</a> things up and try submitting again.
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"</button>
       </div>
     </div>
     <div class="col-md-4">
       <div class="alert alert-success alert-dismissible" role="alert">
-        <strong>Well done!</strong> You successfully read this important <a href="#" class="alert-link">alert message</a>.
+        <strong>Well done!</strong> You successfully read this important <a href="javascript:void(0)" class="alert-link">alert message</a>.
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"</button>
       </div>
     </div>
     <div class="col-md-4">
       <div class="alert alert-info alert-dismissible" role="alert">
-        <strong>Heads up!</strong> This alert needs your <a href="#" class="alert-link">attention</a>, but it's not super important.
+        <strong>Heads up!</strong> This alert needs your <a href="javascript:void(0)" class="alert-link">attention</a>, but it's not super important.
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"</button>
       </div>
     </div>
@@ -2288,8 +2289,8 @@ ifeval::[{cards_simple} == true]
           <h4 class="card-title notoc">Card title</h4>
           <h5 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h5>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          <a href="#" class="card-link">Card link</a>
-          <a href="#" class="card-link">Another link</a>
+          <a href="javascript:void(0)" class="card-link">Card link</a>
+          <a href="javascript:void(0)" class="card-link">Another link</a>
         </div>
       </div>
     </div>
@@ -2299,8 +2300,8 @@ ifeval::[{cards_simple} == true]
           <h4 class="card-title notoc">Card title</h4>
           <h5 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          <a href="#" class="card-link">Card link</a>
-          <a href="#" class="card-link">Another link</a>
+          <a href="javascript:void(0)" class="card-link">Card link</a>
+          <a href="javascript:void(0)" class="card-link">Another link</a>
         </div>
       </div>
     </div>
@@ -2310,8 +2311,8 @@ ifeval::[{cards_simple} == true]
           <h4 class="card-title notoc">Card title</h4>
           <h5 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-          <a href="#" class="card-link">Card link</a>
-          <a href="#" class="card-link">Another link</a>
+          <a href="javascript:void(0)" class="card-link">Card link</a>
+          <a href="javascript:void(0)" class="card-link">Another link</a>
         </div>
       </div>
     </div>
@@ -2365,7 +2366,7 @@ ifeval::[{cards_simple} == true]
         </div>
         <div class="card-footer r-text-200">
           <a class="link-no-decoration card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
-             href="#">Action · Footer Link
+             href="javascript:void(0)">Action · Footer Link
           </a>
         </div>
       </div>
@@ -2381,7 +2382,7 @@ ifeval::[{cards_simple} == true]
         </div>
         <div class="card-footer r-text-200">
           <a class="link-no-decoration card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
-             href="#">Action · Footer Link
+             href="javascript:void(0)">Action · Footer Link
           </a>
         </div>
       </div>
@@ -2396,7 +2397,7 @@ ifeval::[{cards_simple} == true]
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
         <div class="card-footer r-text-200">
-          <a href="#" class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase">
+          <a href="javascript:void(0)" class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase">
           Action · Footer Link
           </a>
         </div>
@@ -2458,8 +2459,8 @@ ifeval::[{cards_image} == true]
         </div>
 
         <div class="card-body">
-          <a href="#" class="card-link">Card link</a>
-          <a href="#" class="card-link">Another link</a>
+          <a href="javascript:void(0)" class="card-link">Card link</a>
+          <a href="javascript:void(0)" class="card-link">Another link</a>
         </div>
         <div class="card-footer text-muted">
           2 days ago
@@ -2801,10 +2802,10 @@ closed, any tooltips and popovers within are also automatically dismissed.
       </div>
       <div class="modal-body">
         <h4 class="notoc">Popover in a modal</h4>
-        <p>This <a href="#" role="button" class="btn btn-primary btn-raised popover-test" data-bs-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on hover or click.</p>
+        <p>This <a href="javascript:void(0)" role="button" class="btn btn-primary btn-raised popover-test" data-bs-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on hover or click.</p>
         <hr>
         <h4 class="notoc">Tooltips in a modal</h4>
-        <p><a href="#" class="tooltip-test" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
+        <p><a href="javascript:void(0)" class="tooltip-test" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="javascript:void(0)" class="tooltip-test" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>