RubyGems - j1-template - Versions diffs - 2021.3.1 → 2022.0.2 - Mend

j1-template 2021.3.1 → 2022.0.2

Files changed (273) hide show

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

@@ -3,21 +3,19 @@ title:                                  Theme previewer
 tagline:                                common components
 date:                                   2020-11-08 00:00:00 +100
 description: >
-                                        Bootstrap is a HTML, CSS & JS Library that focuses on
-                                        simplifying the development of modern web pages. The
-                                        primary purpose to apply the framework to J1 is to
-                                        provide a general standard colors, sizes, fonts and
-                                        the overall layout of a J1-based site. Bootstrap provides
-                                        basic style definitions for all common used HTML elements.
-                                        The Themes Previewer provides an overview for common components
-                                        of a selected theme. Find base Bootstrap features and styles for
-                                        the current theme selected.
+                                        Bootstrap is a HTML, CSS and JS Library that focuses on simplifying the
+                                        development of modern web pages. The primary purpose of applying a theme
+                                        is to change the available standard colors, sizes, and fonts.
+                                        The Themes Previewer provides an overview of common components of a selected
+                                        theme. Find base Bootstrap features and styles for the current theme selected.
 categories:                             [ Previewer ]
 tags:                                   [ Bootstrap, Themes ]
 scrollbar:                              false
+scrollInPageHashes:                     false
 flowtext:                               false
+fab_menu_id:                            page_ctrl_simple
 permalink:                              /pages/public/previewer/theme/
 regenerate:                             false
@@ -42,6 +40,60 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
+// Attribute settings for section control
+//
+:navbars:                               true
+:buttons:                               true
+:buttons_active:                        true
+:buttons_disabled:                      true
+:buttons_outline:                       true
+:buttons_dropdown:                      true
+:buttons_flat:                          false
+:buttons_sizes:                         true
+:buttons_pulsed:                        true
+:buttons_blocklevel:                    true
+:selections:                            true
+:selections_checkboxes:                 true
+:selections_radio_buttons:              true
+:selections_switches:                   true
+:fab:                                   true
+:fab_raised:                            true
+:fab_pulsed:                            true
+:fab_mini:                              true
+:fab_mini_raised:                       true
+:fab_colors:                            true
+:fab_disabled:                          true
+:typography:                            true
+:typography_headings:                   true
+:typography_blockquotes:                true
+:tables:                                true
+:forms:                                 true
+:forms_bootstrap:                       false
+:navs:                                  true
+:navs_tabs:                             true
+:navs_pills:                            true
+:navs_breadcrumbs:                      true
+:navs_pagination:                       true
+:indicators:                            true
+:indicators_alerts:                     true
+:indicators_badges:                     true
+:scrollbars:                            false
+:progress:                              true
+:progress_basic:                        true
+:progress_contextual_alternatives:      true
+:progress_multiple_bars:                true
+:progress_striped:                      true
+:progress_animated:                     true
+:list_group:                            true
+:list_group_basic:                      true
+:list_group_action:                     true
+:cards:                                 true
+:cards_simple:                          true
+:cards_image:                           false
+:dialogs:                               true
+:dialogs_modals:                        true
+:dialogs_popovers_tooltips:             true
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
@@ -57,59 +109,31 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// Include sub-documents
+// Include sub-documents (if any)
 // -----------------------------------------------------------------------------
 ++++
-  <!-- Prepend H1 tag here -->
-  <div id="theme" class="row ml-0 mb-3">
-    <!-- Load the previously selected theme from the (user state) cookie -->
-    <script>
-    $(document).ready(function() {
-      var interval_count = 0;
-      var max_count      = 10;
-      var cookie_names   = j1.getCookieNames();
-      var user_state     = {};
-      var themeName;
-      var themeNameHeadline;
-      var user_state_detected;
-      var dependencies_met_themer = setInterval(function() {
-        interval_count += 1;
-        // if ( j1.adapter.themer.getState() == 'finished' ) {
-        if (j1.getState() == 'finished') {
-          user_state_detected = j1.existsCookie (cookie_names.user_state);
-          if ( user_state_detected ) {
-            user_state = j1.readCookie(cookie_names.user_state);
-            themeName  = user_state.theme_name;
-          } else {
-            themeName  = 'J1 Default';
-          }
-          var themeNameHeadline = '<h2 id="theme_name">Theme ' +themeName+ '</h2>';
-          $('#theme').prepend(themeNameHeadline);
-          clearInterval(dependencies_met_themer);
-          }
-        if (interval_count > max_count) {
-          clearInterval(dependencies_met_themer);
-        }
-      }, 25);
-    });
-    </script>
-  </div>
-++++
-Themes step in the framework to further adjust the appearance of a website
-based on the core CSS rules and definitions of Bootstrap. Themes does not
-change the functionality of the framwork, but modifies rule-based e.g. the
-color scheme, fonts, sizes or the appearance of more complex elements like
-forms or tables. Additionally, a theme may add additonal components but in
-the *sense* of Bootstrap's framework rules and philosophy.
+  <!-- Add H1 (document title) tag here -->
+  <div id="theme" class="document-title row g-0 mb-2"></div>
+++++
+Bootstrap is a HTML, CSS and JS Library that focuses on simplifying the
+development of modern web pages. The primary purpose of applying a theme
+is to change the available standard colors, sizes, fonts and predefined
+HTML elememts like buttons, forms, inputs, or navgation elements.
+Themes for Bootstrap are used to customize the appearance of a website based
+on the basic rules and definitions of Bootstrap's (CSS) styles. The use or
+change of a theme does not alter the functionality of the underlying Bootstrap
+framework but modifies, for example, the color scheme, fonts, or font sizes.
+Furthermore, the appearance of selected predefined HTML elememts like buttons,
+forms or navigation elements may be adapted by a theme.
+ifeval::[{navbars} == true]
 == Navbars
-See examples for Bootstrap’s powerful, responsive navigation header, the
-navbar. Includes support for branding, navigation, and more, including
-support for the collapse plugin.
+A navbar is an elementary page element, usually integrated at the top of
+your page for navigation. Bootstrap offers many navigation functions that
+are minimized on smartphones and thus always remain easy to use.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-navbar}[Bootstrap Docs {char-middot} Navbar, {browser-window--new}]
@@ -121,206 +145,402 @@ colors. Then, customize with `.bg-*` utilities.
 ++++
 <div class="doc-example mb-3">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
-    <a href="#void" class="navbar-brand">Navbar<div class="ripple-container"></div></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>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">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">
+        <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 href="#void" class="nav-link">Home <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a href="#void" class="nav-link">Features</a>
-        </li>
-        <li class="nav-item">
-          <a href="#void" class="nav-link">Pricing</a>
-        </li>
-        <li class="nav-item">
-          <a href="#void" class="nav-link">About</a>
-        </li>
-      </ul>
-      <form class="form-inline">
-        <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
-        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
-      </form>
+      <div class="collapse navbar-collapse" id="navbarColor01">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item">
+            <a class="nav-link active" href="#">Home
+              <span class="visually-hidden">(current)</span>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Features</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Pricing</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">About</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+              href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <div class="dropdown-menu">
+              <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="#">Separated link</a>
+            </div>
+          </li>
+        </ul>
+        <form class="d-flex">
+          <input class="form-control me-sm-2" type="text" placeholder="Search">
+          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+        </form>
+      </div>
     </div>
   </nav>
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
-    <a href="#void" class="navbar-brand">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>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">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">
+        <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 href="#void" class="nav-link">Home <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a href="#void" class="nav-link">Features</a>
-        </li>
-        <li class="nav-item">
-          <a href="#void" class="nav-link">Pricing</a>
-        </li>
-        <li class="nav-item">
-          <a href="#void" class="nav-link">About</a>
-        </li>
-      </ul>
-      <form class="form-inline">
-        <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
-        <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
-      </form>
+      <div class="collapse navbar-collapse" id="navbarColor02">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item">
+            <a class="nav-link active" href="#">Home
+              <span class="visually-hidden">(current)</span>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Features</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Pricing</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">About</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+              href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <div class="dropdown-menu">
+              <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="#">Separated link</a>
+            </div>
+          </li>
+        </ul>
+        <form class="d-flex">
+          <input class="form-control me-sm-2" type="text" placeholder="Search">
+          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </nav>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">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">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarColor03">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item">
+            <a class="nav-link active" href="#">Home
+              <span class="visually-hidden">(current)</span>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Features</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Pricing</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">About</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+              ref="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+            <div class="dropdown-menu">
+              <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="#">Separated link</a>
+            </div>
+          </li>
+        </ul>
+        <form class="d-flex">
+          <input class="form-control me-sm-2" type="text" placeholder="Search">
+          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+        </form>
+      </div>
     </div>
   </nav>
+</div>
+++++
-  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
-    <a href="#void" class="navbar-brand">Navbar</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
+[source, html]
+----
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <div class="container-fluid">
+    <a class="navbar-brand" href="#">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">
       <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 href="#void" class="nav-link">Home <span class="sr-only">(current)</span></a>
+    <div class="collapse navbar-collapse" id="navbarColor01">
+      <ul class="navbar-nav me-auto">
+        <li class="nav-item">
+          <a class="nav-link active" href="#">Home
+            <span class="visually-hidden">(current)</span>
+          </a>
         </li>
         <li class="nav-item">
-          <a href="#void" class="nav-link">Features</a>
+          <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
-          <a href="#void" class="nav-link">Pricing</a>
+          <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item">
-          <a  href="#void" class="nav-link">About</a>
+          <a class="nav-link" href="#">About</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+            href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <div class="dropdown-menu">
+            <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="#">Separated link</a>
+          </div>
         </li>
       </ul>
-      <form class="form-inline">
-        <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
-        <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
+      <form class="d-flex">
+        <input class="form-control me-sm-2" type="text" placeholder="Search">
+        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
       </form>
     </div>
+  </div>
   </nav>
-</div>
-++++
-[source, html, role="noclip"]
 ----
-<nav class="navbar navbar-dark bg-dark">
-  <!-- Navbar content -->
-</nav>
+endif::[]
-<nav class="navbar navbar-dark bg-primary">
-  <!-- Navbar content -->
-</nav>
+ifeval::[{buttons} == true]
+== Buttons
-<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
-  <!-- Navbar content -->
-</nav>
-----
+Buttons are important visual anchors that encourage visitors to click on
+them to call up to click on certain pages and offers on a website.
+Well-designed buttons are usable instead of simple text links. With the use
+of buttons, a higher visiting rate (click-through rate) of important pages
+of a site is achievable.
+The Bootstrap framework offers different buttons out of the box, which is
+sufficient for most use cases. Buttons are suitable for the following HTML
+elements:
-== Buttons
+* Links (anchors)
+* Form buttons (input)
+* General buttons (button)
-Use Bootstrap’s custom button styles for actions in forms, dialogs, and
-more with support for multiple sizes, states, and more. Bootstrap includes
-several predefined button styles, each serving its own semantic purpose,
-with a few extras thrown in for more control.
+Defining a standard button in Bootstrap is very simple: assign the CSS class
+`.btn` to an HTML element. The following sections describe the different
+types of available buttons and how they are to be defined.
-// pass:[<i class="mdi mdi-bootstrap mdi-md-deep-purple mdi-24px"></i>]
-// mdi:bootstrap[24px, mdi-pulsed mdi-md-deep-purple]
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-buttons}[Bootstrap Docs {char-middot} Buttons, {browser-window--new}]
+ifeval::[{buttons_active} == true]
 === Active buttons
-Buttons will appear pressed (with a darker background, darker border, and
-inset shadow) when active.
+Active buttons will appear with a darker background and border. If pressed,
+a *ripple* effect is shown for feedback.
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised">Primary</button>
-  <button type="button" class="btn btn-primary btn-raised">Secondary</button>
-  <button type="button" class="btn btn-success btn-raised">Success</button>
-  <button type="button" class="btn btn-info btn-raised">Info</button>
-  <button type="button" class="btn btn-warning btn-raised">Warning</button>
-  <button type="button" class="btn btn-danger btn-raised">Danger</button>
-  <button type="button" class="btn btn-link btn-raised">Link</button>
+  <button type="button" class="btn btn-primary">Primary</button>
+  <button type="button" class="btn btn-secondary">Secondary</button>
+  <button type="button" class="btn btn-success">Success</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-link">Link</button>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-<button type="button" class="btn btn-primary btn-raised">Primary</button>
-<button type="button" class="btn btn-primary btn-raised">Secondary</button>
-<button type="button" class="btn btn-success btn-raised">Success</button>
-<button type="button" class="btn btn-info btn-raised">Info</button>
-<button type="button" class="btn btn-warning btn-raised">Warning</button>
-<button type="button" class="btn btn-danger btn-raised">Danger</button>
-<button type="button" class="btn btn-link btn-raised">Link</button>
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-info">Info</button>
+<button type="button" class="btn btn-warning">Warning</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-link">Link</button>
 ----
+endif::[]
+ifeval::[{buttons_disabled} == true]
 === Disabled buttons
-Buttons look inactive by adding the disabled boolean attribute to any
-<button> element.
+Buttons look *inactive* by adding the *disabled* boolean attribute to any
+`<button>` element.
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
-  <button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
-  <button type="button" class="btn btn-success btn-raised disabled">Success</button>
-  <button type="button" class="btn btn-info btn-raised disabled">Info</button>
-  <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
-  <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
-  <button type="button" class="btn btn-link btn-raised disabled">Link</button>
+  <button type="button" class="btn btn-primary disabled">Primary</button>
+  <button type="button" class="btn btn-secondary disabled">Secondary</button>
+  <button type="button" class="btn btn-success disabled">Success</button>
+  <button type="button" class="btn btn-info disabled">Info</button>
+  <button type="button" class="btn btn-warning disabled">Warning</button>
+  <button type="button" class="btn btn-danger disabled">Danger</button>
+  <button type="button" class="btn btn-light disabled">Light</button>
+  <button type="button" class="btn btn-dark disabled">Dark</button>
+  <button type="button" class="btn btn-link disabled">Link</button>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
-<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
-<button type="button" class="btn btn-success btn-raised disabled">Success</button>
-<button type="button" class="btn btn-info btn-raised disabled">Info</button>
-<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
-<button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
-<button type="button" class="btn btn-link btn-raised disabled">Link</button>
+<button type="button" class="btn btn-primary disabled">Primary</button>
+<button type="button" class="btn btn-secondary disabled">Secondary</button>
+<button type="button" class="btn btn-success disabled">Success</button>
+<button type="button" class="btn btn-info disabled">Info</button>
+<button type="button" class="btn btn-warning disabled">Warning</button>
+<button type="button" class="btn btn-danger disabled">Danger</button>
+<button type="button" class="btn btn-light disabled">Light</button>
+<button type="button" class="btn btn-dark disabled">Dark</button>
+<button type="button" class="btn btn-link disabled">Link</button>
 ----
+endif::[]
+ifeval::[{buttons_outline} == true]
 === Outline buttons
-In need of a button, but not the hefty background colors they bring? Replace
-the default modifier classes with the `.btn-outline-*` ones to remove all
+In need of a button, but not a hefty background color they bring? Replace
+the default modifier with the class `.btn-outline-*` to remove all
 background images and colors on any button.
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
-  <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
-  <button type="button" class="btn btn-outline-success btn-raised">Success</button>
-  <button type="button" class="btn btn-outline-info btn-raised">Info</button>
-  <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
-  <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
+  <button type="button" class="btn btn-outline-primary">Primary</button>
+  <button type="button" class="btn btn-outline-secondary">Secondary</button>
+  <button type="button" class="btn btn-outline-success">Success</button>
+  <button type="button" class="btn btn-outline-info">Info</button>
+  <button type="button" class="btn btn-outline-warning">Warning</button>
+  <button type="button" class="btn btn-outline-danger">Danger</button>
+  <button type="button" class="btn btn-outline-light">Light</button>
+  <button type="button" class="btn btn-outline-dark">Dark</button>
+</div>
+++++
+[source, html]
+----
+<button type="button" class="btn btn-outline-primary">Primary</button>
+<button type="button" class="btn btn-outline-secondary">Secondary</button>
+<button type="button" class="btn btn-outline-success">Success</button>
+<button type="button" class="btn btn-outline-info">Info</button>
+<button type="button" class="btn btn-outline-warning">Warning</button>
+<button type="button" class="btn btn-outline-danger">Danger</button>
+<button type="button" class="btn btn-outline-light">Light</button>
+<button type="button" class="btn btn-outline-dark">Dark</button>
+----
+endif::[]
+ifeval::[{buttons_dropdown} == true]
+=== Dropdown buttons
+In need of a button having a little menu, buttons with a (nested)
+*dropdown* (menu) can be used.
+++++
+<div class="doc-example mb-3">
+  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+    <button type="button" class="btn btn-primary">Primary</button>
+    <div class="btn-group" role="group">
+      <button id="btnGroupDrop1" type="button"
+        class="btn btn-primary dropdown-toggle"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+  </div>
+  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+    <button type="button" class="btn btn-success">Success</button>
+    <div class="btn-group" role="group">
+      <button id="btnGroupDrop2" type="button"
+        class="btn btn-success dropdown-toggle"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+  </div>
+  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+    <button type="button" class="btn btn-info">Info</button>
+    <div class="btn-group" role="group">
+      <button id="btnGroupDrop3" type="button"
+        class="btn btn-info dropdown-toggle"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupDrop3" style="">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+  </div>
+  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+    <button type="button" class="btn btn-danger">Danger</button>
+    <div class="btn-group" role="group">
+      <button id="btnGroupDrop4" type="button"
+        class="btn btn-danger dropdown-toggle"
+        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupDrop4" style="">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+  </div>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-<button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
-<button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
-<button type="button" class="btn btn-outline-success btn-raised">Success</button>
-<button type="button" class="btn btn-outline-info btn-raised">Info</button>
-<button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
-<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
+  <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+    <button type="button" class="btn btn-primary">Primary</button>
+    <div class="btn-group" role="group">
+      <button id="btnGroupDrop1" type="button"
+        class="btn btn-primary dropdown-toggle"
+        data-bs-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false">
+      </button>
+      <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+        <a class="dropdown-item" href="#">Dropdown link</a>
+        <a class="dropdown-item" href="#">Dropdown link</a>
+      </div>
+    </div>
+</div>
 ----
+endif::[]
+ifeval::[{buttons_flat} == true]
 === Flat buttons
-Flat buttons are text-only buttons. They may be used in dialogs, toolbars,
-or inline. They do not lift, but fill with color on press.
+*Flat* buttons are text-only buttons. They may be used in dialogs, toolbars,
+or inline. They do not lift, but *hightlighted* on mouse *hover* and *focussed*
+on press.
 ++++
 <div class="doc-example">
@@ -334,7 +554,7 @@ or inline. They do not lift, but fill with color on press.
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
@@ -344,210 +564,632 @@ or inline. They do not lift, but fill with color on press.
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">Link</button>
 ----
+endif::[]
+ifeval::[{buttons_sizes} == true]
 === Button sizes
-Beside the default size, small and large buttons are available.
+Beside the *default* size, small and large buttons are available.
+++++
+<div class="doc-example mb-3">
+  <button type="button" class="btn btn-primary btn-lg">Large button</button>
+  <button type="button" class="btn btn-primary">Default button</button>
+  <button type="button" class="btn btn-primary btn-sm">Small button</button>
+</div>
+++++
+[source, html]
+----
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-primary">Default button</button>
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+----
+endif::[]
+ifeval::[{buttons_pulsed} == true]
+=== Pulsed button
+Draw attention to a button, e.g for a *recommended* action.
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
-  <button type="button" class="btn btn-primary btn-raised">Default button</button>
-  <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
+  <button type="button" class="btn btn-primary pulsed-z2">Recommend</button>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
-<button type="button" class="btn btn-primary btn-raised">Default button</button>
-<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
+  <button type="button" class="btn btn-primary pulsed-z2">Primary</button>
 ----
+endif::[]
+ifeval::[{buttons_blocklevel} == true]
 === Block level button
-Create block level buttons—those that span the full width of a parent—by
-adding .btn-block.
+Create responsive stacks of full-width *block buttons* like those in BS@4
+with a mix of *display* and *gap* utilities. By using *utilities* instead of
+button specific classes, you have much greater control over spacing, alignment,
+and responsive behaviors.
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-lg btn-block btn-raised">Block level button</button>
-  <button type="button" class="btn btn-secondary btn-lg btn-block btn-raised">Block level button</button>
+  <div class="d-grid gap-2">
+    <button type="button" class="btn btn-primary btn-lg">Block level button</button>
+    <button type="button" class="btn btn-secondary">Block level button</button>
+  </div>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-<button type="button"
-        class="btn btn-primary btn-lg btn-block btn-raised">
-  Block level button
-</button>
-<button type="button"
-        class="btn btn-secondary btn-lg btn-block btn-raised">
-  Block level button
-</button>
+<div class="d-grid gap-2">
+  <button type="button" class="btn btn-primary btn-lg">Block level button</button>
+  <button type="button" class="btn btn-secondary">Block level button</button>
+</div>
 ----
+endif::[]
+endif::[]
+ifeval::[{selections} == true]
+== Selections
+J1 Template support two *selection* elements: checkboxes and radio buttons.
+These selection elements *replace* the default Bootstrap **toggle**-buttons
+for a better *style*.
+ifeval::[{selections_checkboxes} == true]
+=== Checkboxes
-=== Toggle button
+Checkboxes are used if you want users to select *any* number of options
+from a list of *preset* (available) options.
 ++++
 <div class="doc-example mb-3">
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
-    Single toggle
-  </button>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox">
+      Unchecked Checkbox
+    </label>
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" checked>
+      Checked Checkbox
+    </label>
+  </div>
+  <div class="checkbox disabled">
+    <label>
+      <input type="checkbox" disabled>
+      Disabled Checkbox
+    </label>
+  </div>
+  <div class="checkbox disabled">
+    <label>
+      <input type="checkbox" disabled checked>
+      Checked but disabled Checkbox
+    </label>
+  </div>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-<button type="button" class="btn btn-primary btn-raised"
-  data-toggle="button" aria-pressed="false" autocomplete="off">
-    Single toggle
-</button>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox">
+      Unchecked Checkbox
+    </label>
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" checked>
+      Checked Checkbox
+    </label>
+  </div>
+  <div class="checkbox disabled">
+    <label>
+      <input type="checkbox" disabled>
+      Disabled Checkbox
+    </label>
+  </div>
+  <div class="checkbox disabled">
+    <label>
+      <input type="checkbox" disabled checked>
+      Checked but disabled checkbox
+    </label>
+  </div>
 ----
+endif::[]
-=== Checkboxes and Radio buttons
+ifeval::[{selections_radio_buttons} == true]
+=== Radio buttons
-Bootstrap’s .button styles can be applied to other elements, such as
-`<label>`, to provide checkbox or radio style button toggling. The checked
-state for these buttons is only updated via click event on the button.
+Radio buttons are used if you want to *limit* users to just *one*
+selection from a list of *preset* (available) options.
 ++++
 <div class="doc-example mb-3">
-  <div class="btn-group btn-group-toggle" data-toggle="buttons">
-    <label class="btn btn-primary btn-raised btn-flex active">
-      <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+  <div class="radio">
+    <label>
+      <input type="radio" name="radio">
+      Unchecked Radio button
+    </label>
+  </div>
+  <div class="radio">
+    <label>
+      <input type="radio" name="radio" checked>
+      Checked Radio button
     </label>
-    <label class="btn btn-primary btn-raised btn-flex">
-      <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+  </div>
+  <div class="radio">
+    <label>
+      <input type="radio" name="radio" disabled>
+      Disabled Radio button
     </label>
-    <label class="btn btn-primary btn-raised btn-flex">
-      <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+  </div>
+  <div class="radio">
+    <label>
+      <input type="radio" disabled checked>
+      Checked but disabled Radio button
     </label>
   </div>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
+----
+  <div class="radio">
+    <label>
+      <input type="radio" name="radio">
+      Unchecked Radio button
+    </label>
+  </div>
+  <div class="radio">
+    <label>
+      <input type="radio" name="radio" checked>
+      Checked Radio button
+    </label>
+  </div>
+  <div class="radio">
+    <label>
+      <input type="radio" name="radio" disabled>
+      Disabled Radio button
+    </label>
+  </div>
+  <div class="radio">
+    <label>
+      <input type="radio" disabled checked>
+      Checked but disabled Radio button
+    </label>
+  </div>
 ----
-<div class="btn-group btn-group-toggle" data-toggle="buttons">
-  <label class="btn btn-primary btn-raised btn-flex active">
-    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
-  </label>
-  <label class="btn btn-primary btn-raised btn-flex">
-    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
-  </label>
-  <label class="btn btn-primary btn-raised btn-flex">
-    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
-  </label>
+endif::[]
+ifeval::[{selections_switches} == true]
+=== Switches
+You can use an *alternative* to standard J1 checkboxes: the Material Design
+styled element *switch*. Switches behave the same as checkboxes to want users
+to select *any number* of options from a list of *preset* (available) options.
+++++
+<div class="doc-example mb-3">
+  <div class="switch">
+    <label>
+      <input type="checkbox">
+      Unchecked Switch
+    </label>
+  </div>
+  <div class="switch">
+    <label>
+      <input type="checkbox" checked>
+      Checked Switch
+    </label>
+  </div>
+  <div class="switch">
+    <label>
+      <input type="checkbox" disabled>
+      Disabled Switch
+    </label>
+  </div>
+  <div class="switch">
+    <label>
+      <input type="checkbox" disabled checked>
+      Checked but disabled Switch
+    </label>
+  </div>
 </div>
+++++
+[source, html]
+----
+  <div class="switch">
+    <label>
+      <input type="checkbox">
+      Unchecked Switch
+    </label>
+  </div>
+  <div class="switch">
+    <label>
+      <input type="checkbox" checked>
+      Checked Switch
+    </label>
+  </div>
+  <div class="switch">
+    <label>
+      <input type="checkbox" disabled>
+      Disabled Switch
+    </label>
+  </div>
+  <div class="switch">
+    <label>
+      <input type="checkbox" disabled checked>
+      Checked but disabled Switch
+    </label>
+  </div>
 ----
+endif::[]
-=== Floating action buttons
+ifeval::[{fab} == true]
+=== Floating Action Button (FAB)
-A floating action button represents the primary action in an application,
-it is used for a promoted action.
+Floating Action Buttons are adopted navigation elements from mobile devices
+(Android) but are used today quite often for web pages as well. Floating action
+buttons (FABs) for the web typically provide *additional* actions for a page,
+for example, in-page navigation.
 mdi:bootstrap[24px, mdi-md-deep-purple]
-https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
+https://material.io/components/buttons-floating-action-button/android#using-fabs[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-fab btn-primary" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+</div>
+++++
+[source, html]
+----
+  <button type="button" class="btn btn-fab btn-primary" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+----
+ifeval::[{fab_raised} == true]
+==== Raised FAB
+To put a 3D effect on floating action buttons, buttons can be *raised* by
+adding the additional CSS class `raised-zX`. J1 supports 25 levels of
+raising HTML elements ranging from 0 to 24.
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-fab btn-primary raised-z5 mr-3" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-primary raised-z10 mr-3" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-primary raised-z24" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+</div>
+++++
+[source, html]
+----
+  <button type="button" class="btn btn-fab btn-primary raised-z5" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-primary raised-z10" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-primary raised-z24" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+----
+endif::[]
+ifeval::[{fab_pulsed} == true]
+==== Pulsed FAB
+Draw *attention* to floating action buttons (FAB) with this subtle but
+captivating effect.
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-fab btn-primary pulsed-z3" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+</div>
+++++
+[source, html]
+----
+  <button type="button" class="btn btn-fab btn-primary pulsed-z3" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+----
+endif::[]
+ifeval::[{fab_mini} == true]
+==== Mini FAB
+A smaller sized, *mini* floating action button (FAB) is also available.
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary" aria-label="fab-button-small">
+    <i class="mdi mdi-plus"></i>
+  </button>
+</div>
+++++
+[source, html]
+----
+  <button type="button" class="btn btn-danger btn-fab btn-fab-sm" aria-label="fab-button-small">
+    <i class="mdi mdi-plus"></i>
+  </button>
+----
+endif::[]
+ifeval::[{fab_mini_raised} == true]
+==== Mini FAB raised
+Mini FAB buttons can be *raised* as well by adding the additional CSS class
+`raised-zX`. J1 supports 25 levels of raising HTML elements ranging from 0
+to 24.
 ++++
 <div class="doc-example">
-  <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary raised-z5 mr-3" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary raised-z10 mr-3" aria-label="fab-button">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary raised-z24" aria-label="fab-button">
     <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-  <button type="button" class="btn bmd-btn-fab" aria-label="fab-button">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary raised-z5 mr-3" aria-label="fab-button">
     <i class="mdi mdi-plus"></i>
   </button>
 ----
+endif::[]
+ifeval::[{fab_colors} == true]
 ==== Colors
+For floating action buttons (FAB), all Bootstrap button *color classes* can
+be applied.
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-fab btn-primary" aria-label="fab-button-primary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-secondary" aria-label="fab-button-secondary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-danger" aria-label="fab-button-danger">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-info" aria-label="fab-button-info">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-success" aria-label="fab-button-success">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-warning" aria-label="fab-button-warning">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-dark" aria-label="fab-button-dark">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-light" aria-label="fab-button-light">
+    <i class="mdi mdi-plus"></i>
+  </button>
+</div>
+++++
+[source, html]
+----
+  <button type="button" class="btn btn-fab btn-primary" aria-label="fab-button-primary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-secondary" aria-label="fab-button-secondary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-danger" aria-label="fab-button-danger">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-info" aria-label="fab-button-info">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-success" aria-label="fab-button-success">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-warning" aria-label="fab-button-warning">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-dark" aria-label="fab-button-dark">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-light" aria-label="fab-button-light">
+    <i class="mdi mdi-plus"></i>
+  </button>
+----
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary" aria-label="fab-button-primary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-secondary" aria-label="fab-button-secondary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-danger" aria-label="fab-button-danger">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-info" aria-label="fab-button-info">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-success" aria-label="fab-button-success">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-warning" aria-label="fab-button-warning">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-dark" aria-label="fab-button-dark">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-light" aria-label="fab-button-light">
+    <i class="mdi mdi-plus"></i>
+  </button>
+</div>
+++++
+[source, html]
+----
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary" aria-label="fab-button-primary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-secondary" aria-label="fab-button-secondary">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-danger" aria-label="fab-button-danger">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-info" aria-label="fab-button-info">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-success" aria-label="fab-button-success">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-warning" aria-label="fab-button-warning">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-dark" aria-label="fab-button-dark">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-fab-sm btn-light" aria-label="fab-button-light">
+    <i class="mdi mdi-plus"></i>
+  </button>
+----
+endif::[]
+ifeval::[{fab_disabled} == true]
+==== Disabled FAB
+FAB Buttons look inactive by adding the `disabled` boolean attribute to the
+`<button>` element.
 ++++
 <div class="doc-example">
-  <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
+  <button type="button" class="btn btn-fab btn-primary disabled" aria-label="fab-button-primary">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
+  <button type="button" class="btn btn-fab btn-secondary disabled" aria-label="fab-button-secondary">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-danger" aria-label="fab-button-danger">
+  <button type="button" class="btn btn-fab btn-danger disabled" aria-label="fab-button-danger">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-info" aria-label="fab-button-info">
+  <button type="button" class="btn btn-fab btn-info disabled" aria-label="fab-button-info">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-success" aria-label="fab-button-success">
+  <button type="button" class="btn btn-fab btn-success disabled" aria-label="fab-button-success">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-warning disabled" aria-label="fab-button-warning">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-dark disabled" aria-label="fab-button-dark">
+    <i class="mdi mdi-plus"></i>
+  </button>
+  <button type="button" class="btn btn-fab btn-light disabled" aria-label="fab-button-light">
+    <i class="mdi mdi-plus"></i>
+  </button>
+</div>
+++++
+[source, html]
+----
+  <button type="button" class="btn btn-fab btn-primary disabled" aria-label="fab-button">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-warning" aria-label="fab-button-warning">
+----
+++++
+<div class="doc-example">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary disabled" aria-label="fab-button-primary">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-secondary disabled" aria-label="fab-button-secondary">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-danger disabled" aria-label="fab-button-danger">
     <i class="mdi mdi-plus"></i>
   </button>
-</div>
-++++
-[source, html, role="noclip"]
-----
-  <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-info disabled" aria-label="fab-button-info">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-success disabled" aria-label="fab-button-success">
     <i class="mdi mdi-plus"></i>
   </button>
-  ...
-  <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-warning disabled" aria-label="fab-button-warning">
     <i class="mdi mdi-plus"></i>
   </button>
-  <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-dark disabled" aria-label="fab-button-dark">
     <i class="mdi mdi-plus"></i>
   </button>
-----
-==== Sizes
-A smaller sized, i.e. mini floating action button, is also available.
-++++
-<div class="doc-example">
-  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-light disabled" aria-label="fab-button-light">
     <i class="mdi mdi-plus"></i>
   </button>
 </div>
 ++++
-[source, html, role="noclip"]
+[source, html]
 ----
-  <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
+  <button type="button" class="btn btn-fab btn-fab-sm btn-primary disabled" aria-label="fab-button">
     <i class="mdi mdi-plus"></i>
   </button>
 ----
+endif::[]
+endif::[]
+ifeval::[{typography} == true]
 == Typography
-Bootstrap sets basic global display, typography, and link styles. When more
-control is needed, check out the textual utility classes.
+Typography is a feature of Bootstrap for styling and formatting the text
+content. It is used to create customized headings, inline subheadings, lists,
+paragraphs, aligning, adding more design-oriented font styles, and much more.
-For a more inclusive and accessible type scale, it is assuemed that
-the browser default root font-size (typically 16px) so visitors can
-customize their browser defaults as needed.
+The base for all typography features is the default *font family*. J1 is using
+*Roboto* for the default font at a font size of *16px*. This setting is
+different from the standard Bootstrap configuration using the font family of
+*Helvetica* for the default.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography, {browser-window--new}]
+ifeval::[{typography_headings} == true]
 === Headings
+HTML headings provide valuable information by highlighting important topics
+and the structure of the document. The HTML5 standard offers six levels of
+heading tags, ranging from <h1> through <h6>. The lower the heading level, the
+higher its importance. Therefore <h1> tag defines the most important heading,
+whereas the <h6> tag defines the least important heading in a document.
 ++++
 <div class="doc-example mb-3">
   <div class="row mb-5">
@@ -566,7 +1208,7 @@ link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography,
     </div>
     <div class="col-md-4">
       <h3 class="notoc">Example body text</h2>
-      <p>Nullam quis risus eget <a href="#void">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>
@@ -584,93 +1226,110 @@ link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography,
   </div>
 </div>
 ++++
+endif::[]
+ifeval::[{typography_blockquotes} == true]
 === Blockquotes
+The HTML element `<blockquote>` specifies a section with content quoted
+from another source. Blockquotes are generally displayed with indented
+left and right margins, along with a little extra space added above and
+below.
+For Bootstrap, are more complex styling of cites is available with the
+`<blockquote>` elements respectively the additional CSS class `.blockquote`.
 ++++
 <div class="doc-example mb-3">
-  <div class="row">
-    <div class="col-md-6 p-0">
-      <blockquote class="blockquote">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-      </blockquote>
-    </div>
-    <div class="col-md-6 p-0">
-      <blockquote class="blockquote blockquote-reverse">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-        <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
-      </blockquote>
-    </div>
-  </div>
+  <blockquote class="blockquote">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer class="blockquote-footer">Someone famous in
+      <cite title="Source Title">history</cite>
+    </footer>
+  </blockquote>
 </div>
 ++++
+endif::[]
+endif::[]
+ifeval::[{tables} == true]
 == Tables
-Due to the widespread use of tables across third-party widgets like calendars
-and date pickers, we’ve designed our tables to be opt-in. Just add the base
-class `.table` to any `<table>`, then extend with custom styles or our various
-included modifier classes.
-Using the most basic table markup, here’s how .table-based tables look in
-Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
-tables will be styled in the same manner as the parent.
+Creating a design for tables is challenging. The approach used by J1 Template
+is based on pure CSS on top of the classic Bootstrap styles for simplicity
+and portability to be viewed best on all devices and browsers.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--content-tables}[Bootstrap Docs {char-middot} Tables, {browser-window--new}]
 ++++
 <div class="doc-example mb-3">
-  <table class="table table-striped table-hover table-bordered">
+  <table class="table table-hover">
     <thead>
       <tr>
-        <th>#</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
-        <th>Column heading</th>
+        <th scope="col">Type</th>
+        <th scope="col">Column heading</th>
+        <th scope="col">Column heading</th>
+        <th scope="col">Column heading</th>
       </tr>
     </thead>
     <tbody>
-      <tr>
-        <td>1</td>
+      <tr class="table-active">
+        <th scope="row">Active</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr>
-        <td>2</td>
+        <th scope="row">Default</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
-      <tr class="table-info">
-        <td>3</td>
+      <tr class="table-primary">
+        <th scope="row">Primary</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-secondary">
+        <th scope="row">Secondary</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr class="table-success">
-        <td>4</td>
+        <th scope="row">Success</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr class="table-danger">
-        <td>5</td>
+        <th scope="row">Danger</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
       <tr class="table-warning">
-        <td>6</td>
+        <th scope="row">Warning</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
       </tr>
-      <tr class="table-active">
-        <td>7</td>
+      <tr class="table-info">
+        <th scope="row">Info</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-light">
+        <th scope="row">Light</th>
+        <td>Column content</td>
+        <td>Column content</td>
+        <td>Column content</td>
+      </tr>
+      <tr class="table-dark">
+        <th scope="row">Dark</th>
         <td>Column content</td>
         <td>Column content</td>
         <td>Column content</td>
@@ -679,20 +1338,24 @@ link:{url-bs-docs--content-tables}[Bootstrap Docs {char-middot} Tables, {browser
   </table>
 </div>
 ++++
+endif::[]
+ifeval::[{forms} == true]
 == Forms
-Bootstrap’s form controls expand on our Rebooted form styles with classes.
-Use these classes to opt into their customized displays for a more consistent
-rendering across browsers and devices.
-Be sure to use an appropriate type attribute on all inputs (e.g., email
-for email address or number for numerical information) to take advantage
-of newer input controls like email verification, number selection, and more.
+For collecting structured data, forms are essential. So-called Web forms,
+in short forms, are one of the main points of interaction between a user
+and a website or application. Forms allow users to enter data, which is sent,
+e.g., to a web server for processing.
-Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
+Here are some examples to demonstrate Bootstrap’s form styles. Keep reading
 for documentation on required classes, form layout, and more.
+Be sure to use an appropriate type attribute on all inputs (e.g., email
+for the email address or the number for numerical information) to take
+advantage of newer input controls like email verification, number selection,
+and more.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browser-window--new}]
@@ -710,18 +1373,35 @@ link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browse
       <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
       <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
     </div>
-    <div class="form-group form-check">
-      <input type="checkbox" class="form-check-input" id="exampleCheck1">
-      <label class="form-check-label" for="exampleCheck1">Check me out</label>
+    <div class="form-group">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox">
+          Option 1
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="radio">
+          Option 2
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="radio" checked>
+          Option 3
+        </label>
+      </div>
     </div>
-    <button type="submit" class="btn btn-primary btn-raised">Submit</button>
+    <button type="submit" class="btn btn-primary mt-3">Submit</button>
   </form>
 </div>
 ++++
-Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with
-the .form-control class. Included are styles for general appearance, focus
-state, sizing, and more.
+Textual form controls-like `<input>`, `<select>`, and `<textarea>` are styled
+with the `.form-control` class. Included are styles for general appearance,
+focus state, sizing, and more.
 ++++
 <div class="doc-example mb-3">
@@ -756,33 +1436,232 @@ state, sizing, and more.
 </div>
 ++++
-For file inputs, swap the .form-control for .form-control-file.
+For file inputs, swap the `.form-control` for `.form-control-file`.
+// ++++
+// <div class="doc-example mb-3">
+//   <form>
+//     <div class="form-group">
+//       <input type="file" class="form-control-file" id="exampleFormControlFile1">
+//       <label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
+//     </div>
+//   </form>
+// </div>
+// ++++
+++++
+<div class="doc-example mb-3">
+  <div class="form-group">
+    <label for="formFile" class="form-label mt-4">Default file input example</label>
+    <input class="form-control" type="file" id="formFile">
+  </div>
+</div>
+++++
+ifeval::[{forms_bootstrap} == true]
+=== Bootstrap Forms
 ++++
 <div class="doc-example mb-3">
   <form>
+    <fieldset>
+      <div class="form-group row">
+        <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
+        <div class="col-sm-10">
+          <input type="text" readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com">
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail11" class="form-label mt-4">Email address</label>
+        <input type="email" class="form-control" id="exampleInputEmail11" aria-describedby="emailHelp" placeholder="Enter email">
+        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword11" class="form-label mt-4">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword11" placeholder="Password">
+      </div>
+      <div class="form-group">
+        <label for="exampleSelect1" class="form-label mt-4">Example select</label>
+        <select class="form-select" id="exampleSelect1">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="exampleSelect2" class="form-label mt-4">Example multiple select</label>
+        <select multiple="" class="form-select" id="exampleSelect2">
+          <option>1</option>
+          <option>2</option>
+          <option>3</option>
+          <option>4</option>
+          <option>5</option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label for="exampleTextarea" class="form-label mt-4">Example textarea</label>
+        <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+      </div>
+      <div class="form-group">
+        <label for="formFile" class="form-label mt-4">Default file input example</label>
+        <input class="form-control" type="file" id="formFile">
+      </div>
+      <fieldset class="form-group">
+        <legend class="mt-4">Radio buttons</legend>
+        <div class="form-check">
+          <label class="form-check-label">
+            <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
+            Option one is this and that—be sure to include why it's great
+          </label>
+        </div>
+        <div class="form-check">
+          <label class="form-check-label">
+            <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
+            Option two can be something else and selecting it will deselect option one
+          </label>
+        </div>
+        <div class="form-check disabled">
+          <label class="form-check-label">
+            <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">
+            Option three is disabled
+          </label>
+        </div>
+      </fieldset>
+      <fieldset class="form-group">
+        <legend class="mt-4">Checkboxes</legend>
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+          <label class="form-check-label" for="flexCheckDefault">
+            Default checkbox
+          </label>
+        </div>
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="">
+          <label class="form-check-label" for="flexCheckChecked">
+            Checked checkbox
+          </label>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend class="mt-4">Switches</legend>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
+          <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
+        </div>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
+          <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
+        </div>
+      </fieldset>
+      <fieldset class="form-group">
+        <legend class="mt-4">Ranges</legend>
+          <label for="customRange1" class="form-label">Example range</label>
+          <input type="range" class="form-range" id="customRange1">
+          <label for="disabledRange" class="form-label">Disabled range</label>
+          <input type="range" class="form-range" id="disabledRange" disabled="">
+          <label for="customRange3" class="form-label">Example range</label>
+          <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
+      </fieldset>
+      <!-- button type="submit" class="btn btn-primary">Submit</button -->
+    </fieldset>
+  </form>
+</div>
+++++
+=== Bootstrap Inputs
+++++
+<div class="doc-example mb-3">
+  <div class="form-group">
+    <fieldset disabled="">
+      <label class="form-label" for="disabledInput">Disabled input</label>
+      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
+    </fieldset>
+  </div>
+  <div class="form-group">
+    <fieldset>
+      <label class="form-label mt-4" for="readOnlyInput">Readonly input</label>
+      <input class="form-control" id="readOnlyInput" type="text" placeholder="Readonly input here..." readonly="">
+    </fieldset>
+  </div>
+  <div class="form-group has-success">
+    <label class="form-label mt-4" for="inputValid">Valid input</label>
+    <input type="text" value="correct value" class="form-control is-valid" id="inputValid">
+    <div class="valid-feedback">Success! You've done it.</div>
+  </div>
+  <div class="form-group has-danger">
+    <label class="form-label mt-4" for="inputInvalid">Invalid input</label>
+    <input type="text" value="wrong value" class="form-control is-invalid" id="inputInvalid">
+    <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
+  </div>
+  <div class="form-group">
+    <label class="col-form-label col-form-label-lg mt-4" for="inputLarge">Large input</label>
+    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" id="inputLarge">
+  </div>
+  <div class="form-group">
+    <label class="col-form-label mt-4" for="inputDefault">Default input</label>
+    <input type="text" class="form-control" placeholder="Default input" id="inputDefault">
+  </div>
+  <div class="form-group">
+    <label class="col-form-label col-form-label-sm mt-4" for="inputSmall">Small input</label>
+    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" id="inputSmall">
+  </div>
+  <div class="form-group">
+    <label class="form-label mt-4">Input addons</label>
     <div class="form-group">
-      <input type="file" class="form-control-file" id="exampleFormControlFile1">
-      <label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
+      <div class="input-group mb-3">
+        <span class="input-group-text">$</span>
+        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
+        <span class="input-group-text">.00</span>
+      </div>
+      <div class="input-group mb-3">
+        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
+        <button class="btn btn-primary" type="button" id="button-addon2">Button</button>
+      </div>
     </div>
-  </form>
+  </div>
+  <div class="form-group">
+    <label class="form-label mt-4">Floating labels</label>
+    <div class="form-floating mb-3">
+      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+      <label for="floatingInput">Email address</label>
+    </div>
+    <div class="form-floating">
+      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+      <label for="floatingPassword">Password</label>
+    </div>
+  </div>
 </div>
 ++++
+endif::[]
+endif::[]
+ifeval::[{navs} == true]
 == Navs
-Navigation available in Bootstrap share general markup and styles, from the
+Navigation available in Bootstrap shares general markup and styles, from the
 base .nav class to the active and disabled states. Swap modifier classes to
 switch between each style.
-The base .nav component is built with flexbox and provide a strong foundation
-for building all types of navigation components. It includes some style
-overrides (for working with lists), some link padding for larger hit areas,
+The base .nav component is built with a flexbox and provides a strong foundation
+for building all navigation components. It includes some style
+overrides (for working with lists), link padding for larger hit areas,
 and basic disabled styling.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-navs}[Bootstrap Docs {char-middot} Navs, {browser-window--new}]
+ifeval::[{navs_tabs} == true]
 === Tabs
 Tabs takes the basic nav from above and adds the .nav-tabs class to generate
@@ -791,29 +1670,29 @@ JavaScript plugin.
 ++++
 <div class="doc-example mb-3">
-  <ul class="nav nav-tabs">
+  <ul class="nav nav-tabs mb-3">
     <li class="nav-item">
-      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
+      <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
+      <a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a>
     </li>
     <li class="nav-item dropdown">
-      <a href="#void" class="nav-link dropdown-toggle" data-toggle="dropdown"
+      <a href="#" 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="#void" class="dropdown-item">Action</a>
-        <a href="#void" class="dropdown-item">Another action</a>
-        <a href="#void" class="dropdown-item">Something else here</a>
+        <a href="#" class="dropdown-item">Action</a>
+        <a href="#" class="dropdown-item">Another action</a>
+        <a href="#" class="dropdown-item">Something else here</a>
         <div class="dropdown-divider"></div>
-        <a href="#void" class="dropdown-item">Separated link</a>
+        <a href="#" class="dropdown-item">Separated link</a>
       </div>
     </li>
     <li class="nav-item">
-      <a href="#void" class="nav-link disabled">Disabled</a>
+      <a href="#" class="nav-link disabled">Disabled</a>
     </li>
   </ul>
   <div id="myTabContent" class="tab-content">
@@ -832,8 +1711,9 @@ JavaScript plugin.
   </div>
 </div>
 ++++
+endif::[]
+ifeval::[{navs_pills} == true]
 === Pills
 Take that same HTML as Tabs, but use .nav-pills class instead.
@@ -846,23 +1726,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="#void" class="nav-link active">Active</a>
+          <a href="#" class="nav-link active">Active</a>
         </li>
         <li class="nav-item dropdown mr-1">
-          <a href="#void" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a href="#" 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="#void" class="dropdown-item">Action</a>
-            <a href="#void" class="dropdown-item">Another action</a>
-            <a href="#void" class="dropdown-item">Something else here</a>
+            <a href="#" class="dropdown-item">Action</a>
+            <a href="#" class="dropdown-item">Another action</a>
+            <a href="#" class="dropdown-item">Something else here</a>
             <div class="dropdown-divider"></div>
-            <a href="#void" class="dropdown-item">Separated link</a>
+            <a href="#" class="dropdown-item">Separated link</a>
           </div>
         </li>
         <li class="nav-item mr-1 mb-2">
-          <a href="#void" class="nav-link">Link</a>
+          <a href="#" class="nav-link">Link</a>
         </li>
         <li class="nav-item mr-1 mb-2">
-          <a href="#void" class="nav-link disabled">Disabled</a>
+          <a href="#" class="nav-link disabled">Disabled</a>
         </li>
       </ul>
     </div>
@@ -870,30 +1750,32 @@ 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="#void" class="nav-link active">Active</a>
+          <a href="#" class="nav-link active">Active</a>
         </li>
         <li class="nav-item dropdown mb-1">
-          <a href="#void" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <a href="#" 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="#void" class="dropdown-item">Action</a>
-            <a href="#void" class="dropdown-item">Another action</a>
-            <a href="#void" class="dropdown-item">Something else here</a>
+            <a href="#" class="dropdown-item">Action</a>
+            <a href="#" class="dropdown-item">Another action</a>
+            <a href="#" class="dropdown-item">Something else here</a>
             <div class="dropdown-divider"></div>
-            <a href="#void" class="dropdown-item">Separated link</a>
+            <a href="#" class="dropdown-item">Separated link</a>
           </div>
         </li>
         <li class="nav-item mb-2">
-          <a href="#void" class="nav-link">Link</a>
+          <a href="#" class="nav-link">Link</a>
         </li>
         <li class="nav-item mb-2">
-          <a href="#void" class="nav-link disabled">Disabled</a>
+          <a href="#" class="nav-link disabled">Disabled</a>
         </li>
       </ul>
     </div>
   </div>
 </div>
 ++++
+endif::[]
+ifeval::[{navs_breadcrumbs} == true]
 === Breadcrumbs
 Breadcrumbs indicate the current page’s location within a navigational
@@ -907,17 +1789,19 @@ 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="#void">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="#void">Home</a></li>
-    <li class="breadcrumb-item"><a href="#void">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>
 ++++
+endif::[]
+ifeval::[{navs_pagination} == true]
 === Pagination
 We use a large block of connected links for our pagination, making links
@@ -931,81 +1815,84 @@ it as a navigation section to screen readers and other assistive technologies.
   <div>
     <ul class="pagination">
       <li class="page-item disabled">
-        <a href="#void" class="page-link">&laquo;</a>
+        <a href="#" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a href="#void" class="page-link">1</a>
+        <a href="#" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">2</a>
+        <a href="#" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">3</a>
+        <a href="#" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">4</a>
+        <a href="#" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">5</a>
+        <a href="#" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">&raquo;</a>
+        <a href="#" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
   <div>
     <ul class="pagination pagination-lg">
       <li class="page-item disabled">
-        <a href="#void" class="page-link">&laquo;</a>
+        <a href="#" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a href="#void" class="page-link">1</a>
+        <a href="#" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">2</a>
+        <a href="#" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">3</a>
+        <a href="#" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">4</a>
+        <a href="#" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">5</a>
+        <a href="#" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">&raquo;</a>
+        <a href="#" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
   <div>
     <ul class="pagination pagination-sm">
       <li class="page-item disabled">
-        <a href="#void" class="page-link">&laquo;</a>
+        <a href="#" class="page-link">&laquo;</a>
       </li>
       <li class="page-item active">
-        <a href="#void" class="page-link">1</a>
+        <a href="#" class="page-link">1</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">2</a>
+        <a href="#" class="page-link">2</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">3</a>
+        <a href="#" class="page-link">3</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">4</a>
+        <a href="#" class="page-link">4</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">5</a>
+        <a href="#" class="page-link">5</a>
       </li>
       <li class="page-item">
-        <a href="#void" class="page-link">&raquo;</a>
+        <a href="#" class="page-link">&raquo;</a>
       </li>
     </ul>
   </div>
 </div>
 ++++
+endif::[]
+endif::[]
+ifeval::[{indicators} == true]
 == Indicators
 With Bootstrap, indicators are elememts to raise the users awareness. Alerts
@@ -1013,6 +1900,7 @@ are dynamic elememts that can be used to *indicate* success or something went
 wrong.  Contrasting *Badges, static BS elememts, to raise attention e.g for
 something *new*.
+ifeval::[{indicators_alerts} == true]
 === Alerts
 Alerts provide contextual feedback messages for typical user actions with the
@@ -1027,39 +1915,42 @@ mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {browser-window--new}]
 ++++
-<div class="doc-example mb-3">
-  <div class="row mb-3">
+<div class="doc-example">
+  <div class="row">
     <div class="col-md-12">
-      <div class="alert alert-dismissible alert-warning">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+      <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="#void" 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>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
       </div>
     </div>
   </div>
-  <div class="row mb-5">
+  <div class="row">
     <div class="col-md-4">
-      <div class="alert alert-dismissible alert-danger">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-        <strong>Oh snap!</strong> <a href="#void" class="alert-link">Change a few things up</a> and try submitting again.
+      <div class="alert alert-danger alert-dismissible" role="alert">
+        <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+        <button type="button" class="btn-close" data-bs-dismiss="alert"</button>
       </div>
     </div>
     <div class="col-md-4">
-      <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="#void" class="alert-link">this important alert message</a>.
+      <div class="alert alert-success alert-dismissible" role="alert">
+        <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
+        <button type="button" class="btn-close" data-bs-dismiss="alert"</button>
       </div>
     </div>
     <div class="col-md-4">
-      <div class="alert alert-dismissible alert-info">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-        <strong>Heads up!</strong> This <a href="#void" class="alert-link">alert needs your attention</a>, but it's not super important.
+      <div class="alert alert-info alert-dismissible" role="alert">
+        <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+        <button type="button" class="btn-close" data-bs-dismiss="alert"</button>
       </div>
     </div>
   </div>
 </div>
 ++++
+endif::[]
+ifeval::[{indicators_badges} == true]
 === Badges
 Badges are small count and labeling components. They scale to match the size
@@ -1076,42 +1967,44 @@ mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-badges}[Bootstrap Docs {char-middot} Badge, {browser-window--new}]
 ++++
-<div class="doc-example mb-3">
+<div class="doc-example">
   <div class="bs-component mb-3">
-    <span class="badge badge-primary">Primary</span>
-    <span class="badge badge-secondary">Secondary</span>
-    <span class="badge badge-success">Success</span>
-    <span class="badge badge-danger">Danger</span>
-    <span class="badge badge-warning">Warning</span>
-    <span class="badge badge-info">Info</span>
-    <span class="badge badge-light">Light</span>
-    <span class="badge badge-dark">Dark</span>
-  </div>
-  <div class="bs-component mb-4">
-    <span class="badge badge-pill badge-primary">Primary</span>
-    <span class="badge badge-pill badge-secondary">Secondary</span>
-    <span class="badge badge-pill badge-success">Success</span>
-    <span class="badge badge-pill badge-danger">Danger</span>
-    <span class="badge badge-pill badge-warning">Warning</span>
-    <span class="badge badge-pill badge-info">Info</span>
-    <span class="badge badge-pill badge-light">Light</span>
-    <span class="badge badge-pill badge-dark">Dark</span>
+    <span class="badge bg-primary">Primary</span>
+    <span class="badge bg-secondary">Secondary</span>
+    <span class="badge bg-success">Success</span>
+    <span class="badge bg-danger">Danger</span>
+    <span class="badge bg-warning">Warning</span>
+    <span class="badge bg-info">Info</span>
+    <span class="badge bg-light">Light</span>
+    <span class="badge bg-dark">Dark</span>
+  </div>
+  <div class="bs-component">
+    <span class="badge rounded-pill bg-primary">Primary</span>
+    <span class="badge rounded-pill bg-secondary">Secondary</span>
+    <span class="badge rounded-pill bg-success">Success</span>
+    <span class="badge rounded-pill bg-danger">Danger</span>
+    <span class="badge rounded-pill bg-warning">Warning</span>
+    <span class="badge rounded-pill bg-info">Info</span>
+    <span class="badge rounded-pill bg-light">Light</span>
+    <span class="badge rounded-pill bg-dark">Dark</span>
   </div>
 </div>
 ++++
+endif::[]
+endif::[]
-ifdef::scrollbars[]
-=== Scrollbars
+ifeval::[{scrollbars} == true]
+== Scrollbars
 Chromium-based browsers like Chrome, Edge, Safari or Opera support the *webkit*
 `::-webkit-scrollbar` pseudo element, which allows to modify the look of the
 browser's scrollbar.
-NOTE: Custom (webkit-based) scrollbars are not supported with the Firefox
+NOTE: Custom webkit-based scrollbars are *not* supported with the *Firefox*
 browser.
-.Default scrollbar J1 Template
-[source, css, role="noclip"]
+.Default scrollbar (J1 Template)
+[source, css]
 ----
 ::-webkit-scrollbar {
 	width: 12px;
@@ -1128,76 +2021,53 @@ browser.
 }
 ----
-For J1 Template, following flavours are implemented.
+For the following flavours are implemented.
 [subs="attributes"]
 ++++
-<div>
-  <div class="row">
-    <div class="scrollbar" id="style-default">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-1">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-2">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-3">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-4">
-      <div class="force-overflow"></div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="scrollbar scroller-5">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-6">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-7">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-8">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-9">
-      <div class="force-overflow"></div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="scrollbar scroller-10">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-11">
-      <div class="force-overflow"></div>
-    </div>
-    <div class="scrollbar scroller-13">
-      <div class="force-overflow"></div>
+<div class="doc-example mb-3">
+    <div class="row">
+      <div class="scrollbar" id="style-default">
+        <div class="force-overflow"></div>
+      </div>
+      <div class="scrollbar scroller-1">
+        <div class="force-overflow"></div>
+      </div>
+      <div class="scrollbar scroller-2">
+        <div class="force-overflow"></div>
+      </div>
+      <div class="scrollbar scroller-3">
+        <div class="force-overflow"></div>
+      </div>
+      <div class="scrollbar scroller-4">
+        <div class="force-overflow"></div>
+      </div><div class="scrollbar scroller-5">
+        <div class="force-overflow"></div>
+      </div><div class="scrollbar scroller-6">
+        <div class="force-overflow"></div>
+      </div>
     </div>
-    <div class="scrollbar scroller-14">
-      <div class="force-overflow"></div>
+    <div class="row">
+      <div class="scrollbar scroller-7">
+        <div class="force-overflow"></div>
+      </div>
+      <div class="scrollbar scroller-8">
+        <div class="force-overflow"></div>
+      </div>
+      <div class="scrollbar scroller-9">
+        <div class="force-overflow"></div>
+      </div><div class="scrollbar scroller-10">
+        <div class="force-overflow"></div>
+      </div><div class="scrollbar scroller-11">
+        <div class="force-overflow"></div>
+      </div><div class="scrollbar scroller-12">
+        <div class="force-overflow"></div>
+      </div><div class="scrollbar scroller-14">
+        <div class="force-overflow"></div>
+      </div>
     </div>
-    <div class="scrollbar scroller-15">
-      <div class="force-overflow"></div>
-    </div>
-  </div>
 </div>
 <!-- script>
@@ -1209,6 +2079,7 @@ if (!$.browser.webkit) {
 ++++
 endif::[]
+ifeval::[{progress} == true]
 == Progress
 Bootstrap custom progress bars featuring support for stacked bars, animated
@@ -1220,6 +2091,7 @@ and place text labels over them.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {browser-window--new}]
+ifeval::[{progress_basic} == true]
 === Basic
 ++++
@@ -1231,7 +2103,7 @@ link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {
 ++++
 .Basic progressbar
-[source, html, role="noclip"]
+[source, html]
 ----
   <div class="progress">
     <div  class="progress-bar" role="progressbar"
@@ -1242,7 +2114,9 @@ link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {
     </div>
   </div>
 ----
+endif::[]
+ifeval::[{progress_contextual_alternatives} == true]
 === Contextual alternatives
 ++++
@@ -1263,7 +2137,7 @@ link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {
 ++++
 .Progressbar SUCCESS
-[source, html, role="noclip"]
+[source, html]
 ----
   <div class="progress">
     <div  class="progress-bar bg-success" role="progressbar"
@@ -1274,7 +2148,9 @@ link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {
     </div>
   </div>
 ----
+endif::[]
+ifeval::[{progress_multiple_bars} == true]
 === Multiple bars
 ++++
@@ -1286,7 +2162,9 @@ link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {
   </div>
 </div>
 ++++
+endif::[]
+ifeval::[{progress_striped} == true]
 === Striped
 ++++
@@ -1308,7 +2186,9 @@ link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {
   </div>
 </div>
 ++++
+endif::[]
+ifeval::[{progress_animated} == true]
 === Animated
 ++++
@@ -1318,107 +2198,118 @@ link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {
   </div>
 </div>
 ++++
+endif::[]
+endif::[]
-== Containers
-In sense of Bootstrap, *containers* are more complex, eye-catching elements to
-showcase facts or topics of a site. Typical elements are:
-* Jumbotron
-* Lists
-* Cards
-Find below examples how BS can support the users awarenes.
+ifeval::[{list_group} == true]
+== List Group
+mdi:bootstrap[24px, mdi-md-deep-purple]
+link:{url-bs-docs--components-badges}[Bootstrap Docs {char-middot} List group, {browser-window--new}]
-=== Jumbotron
+List groups are a flexible and powerful component for displaying a *series*
+of content within an *single* HTML element.
-Lightweight, flexible component for showcasing hero unit style content.
+ifeval::[{list_group_basic} == true]
+=== Basic
-mdi:bootstrap[24px, mdi-md-deep-purple]
-link:{url-bs-docs--components-jumbotron}[Bootstrap Docs {char-middot} Jumbotron, {browser-window--new}]
+The most basic list group is an unordered list with simple list items. Build
+upon it with the options that follow, or with your own CSS as needed.
 ++++
 <div class="doc-example mb-3">
-  <div class="jumbotron">
-    <h1 class="display-3">Hello, world!</h1>
-    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-    <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 href="#void" class="btn btn-primary btn-raised btn-lg" role="button">Learn more</a>
-    </p>
-  </div>
+  <ul class="list-group">
+    <li class="list-group-item">An item</li>
+    <li class="list-group-item">A second item</li>
+    <li class="list-group-item">A third item</li>
+    <li class="list-group-item">A fourth item</li>
+    <li class="list-group-item">And a fifth one</li>
+  </ul>
 </div>
 ++++
-=== List groups
+.Basic list group
+[source, html]
+----
+  <div>
+    <ul class="list-group">
+      <li class="list-group-item">An item</li>
+      <li class="list-group-item">A second item</li>
+      <li class="list-group-item">A third item</li>
+      <li class="list-group-item">A fourth item</li>
+      <li class="list-group-item">And a fifth one</li>
+    </ul>
+  </div>
+----
+endif::[]
-List groups are a flexible and powerful component for displaying a series of
-content. Modify and extend them to support just about any content within.
+ifeval::[{list_group_action} == true]
+=== Actionable
-mdi:bootstrap[24px, mdi-md-deep-purple]
-link:{url-bs-docs--components-list_group}[Bootstrap Docs {char-middot} List group, {browser-window--new}]
+Use `<a>` or `<button>` elements to create *actionable* list group items with
+hover, disabled, and active states by adding `.list-group-item-action`.
+We separate these pseudo-classes to ensure list groups made of non-interactive
+elements (like `<li>` or `<div>` elements) don’t provide a click or tap
+affordance.
 ++++
 <div class="doc-example mb-3">
-  <div class="row mb-5">
-    <div class="col-md-4">
-      <ul class="list-group">
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          Describe item #1
-          <span class="badge badge-primary badge-pill">14</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          Describe item #2
-          <span class="badge badge-primary badge-pill">2</span>
-        </li>
-        <li class="list-group-item d-flex justify-content-between align-items-center">
-          Describe item #3
-          <span class="badge badge-primary badge-pill">1</span>
-        </li>
-      </ul>
-    </div>
-    <div class="col-md-4">
-      <div class="list-group">
-        <a href="#void" class="list-group-item list-group-item-action active">
-          Describe item #1
-        </a>
-        <a href="#void" class="list-group-item list-group-item-action">Describe item #2
-        </a>
-        <a href="#void" class="list-group-item list-group-item-action disabled">Describe item #3
-        </a>
-      </div>
-    </div>
-    <div class="col-md-4">
-      <div class="list-group">
-        <a href="#void" class="list-group-item list-group-item-action flex-column align-items-start active">
-          <div class="d-flex w-100 justify-content-between">
-            <h4 class="mb-1 notoc">List group item heading</h4>
-            <small>3 days ago</small>
-          </div>
-          <p class="mb-1">Some quick example text to build on a list and make up the bulk of the list group's content.</p>
-          <small>Summarize whats all about.</small>
-        </a>
-        <a href="#void" 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>
-          </div>
-          <p class="mb-1">Some quick example text to build on a list and make up the bulk of the list group's content.</p>
-          <small class="text-muted">Summarize whats all about.</small>
-        </a>
-      </div>
-    </div>
+  <div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> The current link item </a>
+    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
+    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
+    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
+    <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
   </div>
 </div>
 ++++
+.Actionable list group
+[source, html]
+----
+  <div class="list-group">
+    <a href="#" class="list-group-item list-group-item-action active"
+      aria-current="true"> The current link item </a>
+    <a href="#" class="list-group-item list-group-item-action">
+      A second link item</a>
+    <a href="#" class="list-group-item list-group-item-action">
+      A third link item</a>
+    <a href="#" class="list-group-item list-group-item-action">
+      A fourth link item</a>
+    <a href="#" class="list-group-item list-group-item-action
+      disabled" tabindex="-1"
+      aria-disabled="true">
+      A disabled link item</a>
+  </div>
+----
+endif::[]
-=== Cards
+// === Numbered
+//
+// Add the .list-group-numbered modifier class (and optionally use an
+// <ol> element) to opt into numbered list group items. Numbers are
+// generated via CSS (as opposed to a <ol>s default browser styling) for
+// better placement inside list group items and to allow for better
+// customization.
+//
+// Numbers are generated by counter-reset on the <ol>, and then styled
+// and placed with a ::before pseudo-element on the <li> with counter-increment
+// and content.
+// === With badges
+//
+// Add badges to any list group item to show unread counts, activity, and more
+// with the help of some utilities.
+// === Custom content
+//
+// Add nearly any HTML within, even for linked list groups like the one below,
+// with the help of flexbox utilities.
+endif::[]
+ifeval::[{cards} == true]
+== Cards
 Bootstrap’s cards provide a flexible and extensible content container with
 multiple variants and options. A card is a flexible and extensible content
@@ -1437,7 +2328,8 @@ They have no margin by default, so use spacing utilities as needed.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser-window--new}]
-==== Simple cards
+ifeval::[{cards_simple} == true]
+=== Simple cards
 ++++
 <div class="doc-example mb-3">
@@ -1448,8 +2340,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
           <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="#void" class="card-link">Card link</a>
-          <a href="#void" 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>
@@ -1459,8 +2351,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
           <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="#void" class="card-link">Card link</a>
-          <a href="#void" 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>
@@ -1470,8 +2362,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
           <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="#void" class="card-link">Card link</a>
-          <a href="#void" 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>
@@ -1525,7 +2417,7 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
         </div>
         <div class="card-footer r-text-200">
           <a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
-             href="#void">Action · Footer Link
+             href="#">Action · Footer Link
           </a>
         </div>
       </div>
@@ -1541,7 +2433,7 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
         </div>
         <div class="card-footer r-text-200">
           <a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
-             href="#void">Action · Footer Link
+             href="#">Action · Footer Link
           </a>
         </div>
       </div>
@@ -1556,7 +2448,7 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
           <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="#void" class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase">
+          <a href="#" class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase">
           Action · Footer Link
           </a>
         </div>
@@ -1565,8 +2457,10 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
   </div>
 </div>
 ++++
+endif::[]
-==== Image cards
+ifeval::[{cards_image} == true]
+=== Image cards
 ++++
 <div class="doc-example mb-3">
@@ -1616,8 +2510,8 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
         </div>
         <div class="card-body">
-          <a href="#void" class="card-link">Card link</a>
-          <a href="#void" 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
@@ -1627,12 +2521,16 @@ link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser
   </div>
 </div>
 ++++
+endif::[]
+endif::[]
+ifeval::[{dialogs} == true]
 == Dialogs
 Dialogs are important, interactive UI (user interface) components in Bootstrap
 to *inform* visitor of an website.
+ifeval::[{dialogs_modals} == true]
 === Modals
 Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for
@@ -1646,7 +2544,7 @@ link:{url-bs-docs--components-modal}[Bootstrap Docs {char-middot} Modal, {browse
 .Modal types
 [cols="2a,8a,2a", options="header", width="100%", role="rtable"]
-|===============================================================================
+|===
 |Type |Description |Launch Example
 |*Base*
@@ -1657,9 +2555,9 @@ from the top of the page.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleSimpleModal">
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#exampleSimpleModal">
     Launch Example
   </button>
 </div>
@@ -1674,16 +2572,16 @@ from the top of the page.
     <div class="modal-content">
       <div class="modal-header">
         <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true"</span>
         </button>
       </div>
       <div class="modal-body">
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -1698,9 +2596,9 @@ it (the backdrop).
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleStaticModal">
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#exampleStaticModal">
     Launch Example
   </button>
 </div>
@@ -1717,16 +2615,16 @@ it (the backdrop).
     <div class="modal-content">
       <div class="modal-header">
         <h5 id="exampleStatcModalLabel" class="modal-title notoc">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true"</span>
         </button>
       </div>
       <div class="modal-body">
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -1742,9 +2640,9 @@ the height.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleModalLong">
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#exampleModalLong">
     Launch Example
   </button>
 </div>
@@ -1760,8 +2658,8 @@ the height.
     <div class="modal-content">
       <div class="modal-header">
         <h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true"</span>
         </button>
       </div>
       <div class="modal-body">
@@ -1801,8 +2699,8 @@ the height.
         </p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -1817,9 +2715,9 @@ modal body. Try the demo and scroll the content.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleModalLongScrollable">
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#exampleModalLongScrollable">
     Launch Example
   </button>
 </div>
@@ -1835,8 +2733,8 @@ modal body. Try the demo and scroll the content.
     <div class="modal-content">
       <div class="modal-header">
         <h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true"</span>
         </button>
       </div>
       <div class="modal-body">
@@ -1876,8 +2774,8 @@ modal body. Try the demo and scroll the content.
         </p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -1891,8 +2789,8 @@ modal body. Try the demo and scroll the content.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal" data-target="#exampleModalVerticalCenter">
+    class="btn btn-primary"
+    data-bs-toggle="modal" data-bs-target="#exampleModalVerticalCenter">
     Launch Example
   </button>
 </div>
@@ -1907,8 +2805,8 @@ modal body. Try the demo and scroll the content.
     <div class="modal-content">
       <div class="modal-header">
         <h5 id="exampleModalVerticalCenterTitle" class="modal-title notoc">Modal title</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true"</span>
         </button>
       </div>
       <div class="modal-body">
@@ -1917,8 +2815,8 @@ modal body. Try the demo and scroll the content.
         voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -1933,9 +2831,9 @@ closed, any tooltips and popovers within are also automatically dismissed.
 <div class="ml-0">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleModalTooltip">
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#exampleModalTooltip">
     Launch Example
   </button>
 </div>
@@ -1950,36 +2848,36 @@ closed, any tooltips and popovers within are also automatically dismissed.
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h4>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true"</span>
         </button>
       </div>
       <div class="modal-body">
         <h4 class="notoc">Popover in a modal</h4>
-        <p>This <a href="#void" role="button" class="btn btn-primary btn-raised popover-test" data-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="#" role="button" class="btn btn-primary 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="#void" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#void" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
+        <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>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
-        <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary btn-flex mr-2">Do nothing</button>
+        <button type="button" class="btn btn-secondary btn-flex" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
 </div>
 ++++
-|===============================================================================
+|===
 .Base Modal example
-[source, html, role="noclip"]
+[source, html]
 ----
 <!-- Trigger Button (modal) -->
 <div class="ml-0">
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#exampleSimpleModal">
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#exampleSimpleModal">
     Launch Example
   </button>
 </div>
@@ -1997,10 +2895,10 @@ closed, any tooltips and popovers within are also automatically dismissed.
         <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
         <button
           type="button"
-          class="close"
-          data-dismiss="modal"
+          class="btn-close"
+          data-bs-dismiss="modal"
           aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+          <span aria-hidden="true"</span>
         </button>
       </div>
       <div class="modal-body">
@@ -2008,73 +2906,177 @@ closed, any tooltips and popovers within are also automatically dismissed.
       </div>
       <div class="modal-footer">
         <button type="button"
-          class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
+          class="btn btn-primary btn-flex mr-2"> Do nothing
         </button>
         <button
           type="button"
-          class="btn btn-secondary btn-flex btn-raised"
-          data-dismiss="modal"> Close
+          class="btn btn-secondary btn-flex"
+          data-bs-dismiss="modal"> Close
         </button>
       </div>
     </div>
   </div>
 </div>
 ----
+endif::[]
-=== Popovers and Tooltips
+ifeval::[{dialogs_popovers_tooltips} == true]
+=== Tooltips and Popovers
 Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
 To make them properly positioned, the Javascript library `popper.min.js` has to
 be included before `bootstrap.js` in order to make popovers and tooltips to work.
-mdi:bootstrap[24px, mdi-md-deep-purple]
-link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {browser-window--new}] +
+==== Tooltips
+Bla bla blu.
 mdi:bootstrap[24px, mdi-md-deep-purple]
 link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {browser-window--new}]
-NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
 ++++
 <div class="doc-example mb-3">
-  <div class="row mb-5">
+  <div class="row d-flex justify-content-center">
     <div class="col-md-6 p-0">
-      <h5 class="mb-5 notoc">Popovers</h5>
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
-      <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
-    </div>
-    <div class="col-md-6 p-0">
-      <h5 class="mb-5 notoc">Tooltips</h5>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
-      <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
+      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
     </div>
   </div>
 </div>
 ++++
-.Example for Popovers and Tooltips
-[source, html, role="noclip"]
+.Examples for Tooltips
+[source, html]
 ----
-  <div class="row mb-5">
-    <div class="col-md-6 p-0">
-      <h5 class="mb-5 notoc">Popovers</h5>
-      <button type="button" class="btn btn-primary btn-raised"
-        title="Popover Title" data-container="body"
-        data-toggle="popover" data-placement="top"
-        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
-      </button>
-      ...
-    </div>
+  <button type="button" class="btn btn-primary"
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    title="Tooltip on top">Top
+  </button>
+  <button type="button" class="btn btn-primary"
+    data-bs-toggle="tooltip"
+    data-bs-placement="bottom"
+    title="Tooltip on bottom">Bottom
+  </button>
+  <button type="button" class="btn btn-primary"
+    data-bs-toggle="tooltip"
+    data-bs-placement="right"
+    title="Tooltip on right">Right
+  </button>
+  <button type="button" class="btn btn-primary"
+    data-bs-toggle="tooltip"
+    data-bs-placement="left"
+    title="Tooltip on left">Left
+  </button>
+----
+==== Popovers
+Bla bla blu.
+mdi:bootstrap[24px, mdi-md-deep-purple]
+link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {browser-window--new}]
+++++
+<div class="doc-example mb-3">
+  <div class="row d-flex justify-content-center">
     <div class="col-md-6 p-0">
-      <h5 class="mb-5 notoc">Tooltips</h5>
-      <button type="button" class="btn btn-primary btn-raised"
-              data-toggle="tooltip" data-placement="top"
-              title="Tooltip on top">Top
-      </button>
-      ...
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
+      <button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover focus" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
     </div>
   </div>
+</div>
+++++
+.Examples for Popovers
+[source, html]
+----
+  <button type="button" class="btn btn-primary"
+    title="Popover Title"
+    data-container="body"
+    data-bs-toggle="popover"
+    data-bs-placement="top"
+    data-bs-trigger="hover focus"
+    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    Top
+  </button>
+  <button type="button" class="btn btn-primary"
+    title="Popover Title"
+    data-container="body"
+    data-bs-toggle="popover"
+    data-bs-placement="bottom"
+    data-bs-trigger="hover focus"
+    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    Bottom
+  </button>
+  <button type="button" class="btn btn-primary"
+    title="Popover Title" data-container="body"
+    data-bs-toggle="popover"
+    data-bs-placement="right"
+    data-bs-trigger="hover focus"
+    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    Right
+  </button>
+  <button type="button" class="btn btn-primary"
+    title="Popover Title"
+    data-container="body"
+    data-bs-toggle="popover"
+    data-bs-placement="left"
+    data-bs-trigger="hover focus"
+    data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+    Left
+  </button>
 ----
+endif::[]
+endif::[]
+++++
+<script>
+  var cookie_names  = j1.getCookieNames();
+  var user_state    = j1.readCookie(cookie_names.user_state);
+  var theme_slogans = {};
+  var theme_slogan;
+  var themeName;
+  var themeNameHeadline;
+  theme_slogans.UnoLight  = 'An universial light theme';
+  theme_slogans.UnoDark   = 'An universial dark theme';
+  theme_slogans.Bootstrap = 'Bootstrap V5 default theme';
+  theme_slogans.Cerulean  = 'A calm blue sky';
+  theme_slogans.Cosmo     = 'An ode to Metro';
+  theme_slogans.Cyborg    = 'Jet black and electric blue';
+  theme_slogans.Darkly    = 'Theme Flatly in night mode';
+  theme_slogans.Flatly    = 'Flat and modern';
+  theme_slogans.Journal   = 'Crisp like a new sheet of paper';
+  theme_slogans.Litera    = 'The medium is the message';
+  theme_slogans.Lumen     = 'Light and shadow';
+  theme_slogans.Materia   = 'Material is the metaphor';
+  theme_slogans.Minty     = 'A fresh feel';
+  theme_slogans.Morph     = 'A neumorphic layer';
+  theme_slogans.Pulse     = 'A trace of purple';
+  theme_slogans.Quartz    = 'A glassmorphic layer';
+  theme_slogans.Sandstone = 'A touch of warmth';
+  theme_slogans.Simplex   = 'Mini and minimalist';
+  theme_slogans.Slate     = 'Shades of gunmetal gray';
+  theme_slogans.Solar     = 'A spin on Solarized';
+  theme_slogans.Spacelab  = 'Silvery and sleek';
+  theme_slogans.Superhero = 'The brave and the blue';
+  theme_slogans.United    = 'Ubuntu orange and unique font';
+  theme_slogans.Vapor     = 'A cyberpunk aesthetic';
+  theme_slogans.Yeti      = 'A friendly foundation';
+  theme_slogans.Zephyr    = 'Breezy and beautiful';
+  themeName               = user_state.theme_name;
+  theme_slogan            = theme_slogans[themeName];
+  themeNameHeadline       = '<h1 id="theme_name" class="mb-0">Theme ' +themeName+ '</h1>';
+  $('#theme').prepend(themeNameHeadline);
+  $('#theme').append('<p class="tagline mb-2"><b>'  + theme_slogan + '</b></p>');
+  $('#theme').append('<div class="d-inline-block g-width-50 g-height-2 bg-primary mb-2"></div>');
+</script>
+++++