j1_template_mde 2018.4.17 → 2018.4.18

data/lib/starter_web/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "j1_starter",
-  "version": "2018.4.17",
+  "version": "2018.4.18",
   "description": "Starter site for J1 Template",
   "homepage": "https://your.site",
   "author": {

data/lib/starter_web/pages/private/previewer/justified_gallery.html

@@ -40,7 +40,7 @@ regenerate:                             false
         <ul class="nav navbar-nav">
           <!-- li class="nav-item">Customize Your Gallery</li -->
           <li class="nav-item">
-            <a class="nav-link" href="javascript:void(0)">Preview Your Gallery</a>
+            <a class="nav-link" href="#">Preview Your Gallery</a>
           </li>
         </ul>
       </div>

data/lib/starter_web/pages/private/previewer/mdi_icons_preview.adoc

@@ -4,7 +4,7 @@ tagline:                                Search and Select MDI Icons
 description:                            Material Design Icons Preview for J1 Template
 
 toc:                                    true
-tags:                                   [Preview, Material, Design, MDI, FontAwesome, Icon, Fonts ]
+tags:                                   [Preview, Material, Design, MDI, Icon, Fonts ]
 author:                                 J1 Team
 permalink:                              /pages/private/previewer/mdi_font/
 regenerate:                             false
@@ -95,13 +95,13 @@ lorem:sentences[5]
 
 ++++
 <div class="row">
-  <a href="javascript:void(0)" class="mdi mdi-md-gray-300">
+  <a href="#" class="mdi mdi-md-gray-300">
     <i class="mdi mdi-alert mdi-3x mdi-md-red mdi-flex-align-center mr-2"></i> Hover effect on the anchor text
   </a>
 </div>
 
 <div class="row">
-  <a href="javascript:void(0)" class="mdi mdi-md-gray-300">
+  <a href="#" class="mdi mdi-md-gray-300">
     <i class="mdi mdi-alert mdi-3x mdi-md-red mdi-flex-align-center mr-2">
      Hover effect on the anchor text
     </i>
@@ -259,7 +259,7 @@ NOTE: Click on the elements below to copy icon data to clipboard
               document.execCommand('copy');
               var copied = document.createElement('div');
               copied.setAttribute('class', 'copied');
-              copied.appendChild(document.createTextNode('Copied to Clipboard'));
+              copied.appendChild(document.createTextNode('Copied!'));
               document.body.appendChild(copied);
               setTimeout(function () {
                   document.body.removeChild(copyFrom);

data/lib/starter_web/pages/public/panels/service_panel_components.adoc

@@ -0,0 +1,36 @@
+---
+title:                              The Components
+tagline:                            Building blocks ready to use
+description:                        Building blocks ready to use
+
+tags:                               [ Template, Overview, Components ]
+
+permalink:                          /pages/public/panels/service_panel_components/
+
+regenerate:                         false
+---
+
+
+== Components
+
+Components are the building blocks ready to use to create common page components,
+connections to systems and workflows of social networks like Twitter or Facebook
+or cloud services like Disqus for blog-related online forums and discussion.
+
+lorem:sentences[5]
+
+=== Panel
+
+lorem:sentences[5]
+
+lorem:sentences[2]
+
+=== Builder
+
+lorem:sentences[3]
+
+lorem:sentences[2]
+
+=== Connectors
+
+lorem:sentences[5]

data/lib/starter_web/pages/public/panels/service_panel_core.adoc

@@ -0,0 +1,39 @@
+---
+title:                              The Core
+tagline:                            Base functions for layout, design and configuration
+description:                        Base functions for layout, design and configuration
+
+tags:                               [ Template, Overview, Core ]
+
+permalink:                          /pages/public/panels/service_panel_core/
+
+regenerate:                         false
+---
+
+== Core
+
+The core integrates the site generator Jekyll into J1, contains all base
+functions for page layout, design and configuration. Provides procedures
+to generate web pages automatically based on a given layout based on design
+settings.
+
+lorem:sentences[5]
+
+=== Layout System
+
+lorem:sentences[5]
+
+lorem:sentences[2]
+
+
+=== Template Engine
+
+lorem:sentences[3]
+
+lorem:sentences[2]
+
+=== Bootstrap Integration
+
+lorem:sentences[5]
+
+lorem:sentences[3]

data/lib/starter_web/pages/public/panels/service_panel_modules.adoc

@@ -0,0 +1,37 @@
+---
+title:                              The Modules
+tagline:                            Ready-to-use applications to present image and video content
+description:                        Ready-to-use applications to present image and video content
+
+tags:                               [ Template, Overview, Modules ]
+
+permalink:                          /pages/public/panels/service_panel_modules/
+
+regenerate:                         false
+---
+
+== Modules
+
+Javascript libraries and ready-to-use applications gets the Site dynamic.
+JS modules add complex funtionality to Web pages for image and video galleries
+or slider to present the content animated as a show.
+
+lorem:sentences[5]
+
+== Lightboxes
+
+lorem:sentences[5]
+
+lorem:sentences[3]
+
+== Slider
+
+lorem:sentences[3]
+
+lorem:sentences[5]
+
+== Galleries
+
+lorem:sentences[5]
+
+lorem:sentences[2]

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

@@ -94,23 +94,23 @@ Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
     <div class="col-md-12">
       <div class="bs-component mb-2">
         <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-          <a class="navbar-brand" href="javascript:void(0)">Navbar</a>
+          <a class="navbar-brand" href="#">Navbar</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarColor01">
             <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
-                <a class="nav-link" href="javascript:void(0)">Home <span class="sr-only">(current)</span></a>
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">Features</a>
+                <a class="nav-link" href="#">Features</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">Pricing</a>
+                <a class="nav-link" href="#">Pricing</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">About</a>
+                <a class="nav-link" href="#">About</a>
               </li>
             </ul>
             <form class="form-inline my-2 my-lg-0">
@@ -122,23 +122,23 @@ Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
       </div>
       <div class="bs-component mb-2">
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-          <a class="navbar-brand" href="javascript:void(0)">Navbar</a>
+          <a class="navbar-brand" href="#">Navbar</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarColor02">
             <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
-                <a class="nav-link" href="javascript:void(0)">Home <span class="sr-only">(current)</span></a>
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">Features</a>
+                <a class="nav-link" href="#">Features</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">Pricing</a>
+                <a class="nav-link" href="#">Pricing</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">About</a>
+                <a class="nav-link" href="#">About</a>
               </li>
             </ul>
             <form class="form-inline my-2 my-lg-0">
@@ -150,23 +150,23 @@ Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
       </div>
       <div class="bs-component mb-2">
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
-          <a class="navbar-brand" href="javascript:void(0)">Navbar</a>
+          <a class="navbar-brand" href="#">Navbar</a>
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarColor03">
             <ul class="navbar-nav mr-auto">
               <li class="nav-item active">
-                <a class="nav-link" href="javascript:void(0)">Home <span class="sr-only">(current)</span></a>
+                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">Features</a>
+                <a class="nav-link" href="#">Features</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">Pricing</a>
+                <a class="nav-link" href="#">Pricing</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="javascript:void(0)">About</a>
+                <a class="nav-link" href="#">About</a>
               </li>
             </ul>
             <form class="form-inline my-2 my-lg-0">
@@ -229,8 +229,8 @@ Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
           <div class="btn-group" role="group">
             <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
             <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
             </div>
           </div>
         </div>
@@ -239,8 +239,8 @@ Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
           <div class="btn-group" role="group">
             <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
             <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
             </div>
           </div>
         </div>
@@ -249,8 +249,8 @@ Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
           <div class="btn-group" role="group">
             <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
             <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
             </div>
           </div>
         </div>
@@ -259,8 +259,8 @@ Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
           <div class="btn-group" role="group">
             <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
             <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
-              <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
+              <a class="dropdown-item" href="#">Dropdown link</a>
             </div>
           </div>
         </div>
@@ -379,7 +379,7 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
     <div class="col-md-4">
       <div class="bs-component">
         <h3 class="notoc">Example body text</h2>
-        <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>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><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>
@@ -695,17 +695,17 @@ JavaScript plugin.
             <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu">
-              <a class="dropdown-item" href="javascript:void(0)">Action</a>
-              <a class="dropdown-item" href="javascript:void(0)">Another action</a>
-              <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
               <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
+              <a class="dropdown-item" href="#">Separated link</a>
             </div>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
+            <a class="nav-link disabled" href="#">Disabled</a>
           </li>
         </ul>
         <div id="myTabContent" class="tab-content">
@@ -744,23 +744,23 @@ Take that same HTML as Tabs, but use .nav-pills class instead:
       <div class="bs-component">
         <ul class="nav nav-pills">
           <li class="nav-item">
-            <a class="nav-link active" href="javascript:void(0)">Active</a>
+            <a class="nav-link active" href="#">Active</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu">
-              <a class="dropdown-item" href="javascript:void(0)">Action</a>
-              <a class="dropdown-item" href="javascript:void(0)">Another action</a>
-              <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
               <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
+              <a class="dropdown-item" href="#">Separated link</a>
             </div>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="javascript:void(0)">Link</a>
+            <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
+            <a class="nav-link disabled" href="#">Disabled</a>
           </li>
         </ul>
       </div>
@@ -769,23 +769,23 @@ Take that same HTML as Tabs, but use .nav-pills class instead:
       <div class="bs-component">
         <ul class="nav nav-pills flex-column">
           <li class="nav-item">
-            <a class="nav-link active" href="javascript:void(0)">Active</a>
+            <a class="nav-link active" href="#">Active</a>
           </li>
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
             <div class="dropdown-menu">
-              <a class="dropdown-item" href="javascript:void(0)">Action</a>
-              <a class="dropdown-item" href="javascript:void(0)">Another action</a>
-              <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
+              <a class="dropdown-item" href="#">Action</a>
+              <a class="dropdown-item" href="#">Another action</a>
+              <a class="dropdown-item" href="#">Something else here</a>
               <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
+              <a class="dropdown-item" href="#">Separated link</a>
             </div>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="javascript:void(0)">Link</a>
+            <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
+            <a class="nav-link disabled" href="#">Disabled</a>
           </li>
         </ul>
       </div>
@@ -814,12 +814,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 href="javascript:void(0)">Home</a></li>
+          <li class="breadcrumb-item"><a href="#">Home</a></li>
           <li class="breadcrumb-item active">Library</li>
         </ol>
         <ol class="breadcrumb">
-          <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
-          <li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
+          <li class="breadcrumb-item"><a href="#">Home</a></li>
+          <li class="breadcrumb-item"><a href="#">Library</a></li>
           <li class="breadcrumb-item active">Data</li>
         </ol>
       </div>
@@ -848,75 +848,75 @@ it as a navigation section to screen readers and other assistive technologies.
       <div>
         <ul class="pagination">
           <li class="page-item disabled">
-            <a class="page-link" href="javascript:void(0)">&laquo;</a>
+            <a class="page-link" href="#">&laquo;</a>
           </li>
           <li class="page-item active">
-            <a class="page-link" href="javascript:void(0)">1</a>
+            <a class="page-link" href="#">1</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">2</a>
+            <a class="page-link" href="#">2</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">3</a>
+            <a class="page-link" href="#">3</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">4</a>
+            <a class="page-link" href="#">4</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">5</a>
+            <a class="page-link" href="#">5</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">&raquo;</a>
+            <a class="page-link" href="#">&raquo;</a>
           </li>
         </ul>
       </div>
       <div>
         <ul class="pagination pagination-lg">
           <li class="page-item disabled">
-            <a class="page-link" href="javascript:void(0)">&laquo;</a>
+            <a class="page-link" href="#">&laquo;</a>
           </li>
           <li class="page-item active">
-            <a class="page-link" href="javascript:void(0)">1</a>
+            <a class="page-link" href="#">1</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">2</a>
+            <a class="page-link" href="#">2</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">3</a>
+            <a class="page-link" href="#">3</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">4</a>
+            <a class="page-link" href="#">4</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">5</a>
+            <a class="page-link" href="#">5</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">&raquo;</a>
+            <a class="page-link" href="#">&raquo;</a>
           </li>
         </ul>
       </div>
       <div>
         <ul class="pagination pagination-sm">
           <li class="page-item disabled">
-            <a class="page-link" href="javascript:void(0)">&laquo;</a>
+            <a class="page-link" href="#">&laquo;</a>
           </li>
           <li class="page-item active">
-            <a class="page-link" href="javascript:void(0)">1</a>
+            <a class="page-link" href="#">1</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">2</a>
+            <a class="page-link" href="#">2</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">3</a>
+            <a class="page-link" href="#">3</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">4</a>
+            <a class="page-link" href="#">4</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">5</a>
+            <a class="page-link" href="#">5</a>
           </li>
           <li class="page-item">
-            <a class="page-link" href="javascript:void(0)">&raquo;</a>
+            <a class="page-link" href="#">&raquo;</a>
           </li>
         </ul>
       </div>
@@ -954,7 +954,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
         <div class="alert alert-dismissible alert-warning">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
           <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="javascript:void(0)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
+          <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>
         </div>
       </div>
     </div>
@@ -964,7 +964,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
       <div class="bs-component">
         <div class="alert alert-dismissible alert-danger">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Oh snap!</strong> <a href="javascript:void(0)" class="alert-link">Change a few things up</a> and try submitting again.
+          <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
         </div>
       </div>
     </div>
@@ -972,7 +972,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
       <div class="bs-component">
         <div class="alert alert-dismissible alert-success">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Well done!</strong> You successfully read <a href="javascript:void(0)" class="alert-link">this important alert message</a>.
+          <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
         </div>
       </div>
     </div>
@@ -980,7 +980,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
       <div class="bs-component">
         <div class="alert alert-dismissible alert-info">
           <button type="button" class="close" data-dismiss="alert">&times;</button>
-          <strong>Heads up!</strong> This <a href="javascript:void(0)" class="alert-link">alert needs your attention</a>, but it's not super important.
+          <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
         </div>
       </div>
     </div>
@@ -1194,7 +1194,7 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
           <hr class="my-4">
           <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
           <p class="lead">
-            <a class="btn btn-primary btn-raised btn-lg" href="javascript:void(0)" role="button">Learn more</a>
+            <a class="btn btn-primary btn-raised btn-lg" href="#" role="button">Learn more</a>
           </p>
         </div>
       </div>
@@ -1239,12 +1239,12 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
     <div class="col-md-4">
       <div class="bs-component">
         <div class="list-group">
-          <a href="javascript:void(0)" class="list-group-item list-group-item-action active">
+          <a href="#" class="list-group-item list-group-item-action active">
             Cras justo odio
           </a>
-          <a href="javascript:void(0)" class="list-group-item list-group-item-action">Dapibus ac facilisis
+          <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis
           </a>
-          <a href="javascript:void(0)" class="list-group-item list-group-item-action disabled">Morbi leo risus
+          <a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
           </a>
         </div>
       </div>
@@ -1253,7 +1253,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
     <div class="col-md-4">
       <div class="bs-component">
         <div class="list-group">
-          <a href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start active">
+          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
             <div class="d-flex w-100 justify-content-between">
               <h5 class="mb-1 notoc">List group item heading</h5>
               <small>3 days ago</small>
@@ -1261,7 +1261,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
             <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
             <small>Donec id elit non mi porta.</small>
           </a>
-          <a href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start">
+          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
             <div class="d-flex w-100 justify-content-between">
               <h5 class="mb-1 notoc">List group item heading</h5>
               <small class="text-muted">3 days ago</small>
@@ -1442,8 +1442,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
             <li class="list-group-item">Vestibulum at eros</li>
           </ul>
           <div class="card-body">
-            <a href="javascript:void(0)" class="card-link">Card link</a>
-            <a href="javascript:void(0)" class="card-link">Another link</a>
+            <a href="#" class="card-link">Card link</a>
+            <a href="#" class="card-link">Another link</a>
           </div>
           <div class="card-footer text-muted">
             2 days ago
@@ -1454,8 +1454,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
             <h4 class="card-title notoc">Card title</h4>
             <h6 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="javascript:void(0)" class="card-link">Card link</a>
-            <a href="javascript:void(0)" class="card-link">Another link</a>
+            <a href="#" class="card-link">Card link</a>
+            <a href="#" class="card-link">Another link</a>
           </div>
         </div>
       </div>