j1-template 2023.7.0 → 2023.8.0

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

@@ -1,5 +1,6 @@
 ---
 title:                                  Theme Preview
+title_extention:                        Preview Bootstrap theme for J1 Template
 tagline:                                Explore Current Styles
 
 date:                                   2022-12-01
@@ -12,6 +13,9 @@ description: >
                                         Bootstrap are used to customize the appearance
                                         of a website based on the basic rules and definitions of
                                         Bootstrap's CSS styles.
+keywords: >
+                                        Jekyll, JekyllOne, Theme, User Guide, Tool, YAML,
+                                        Reference
 
 categories:                             [ Previewer ]
 tags:                                   [ Bootstrap, CSS, Theme ]
@@ -21,13 +25,15 @@ image:
   width:                                1920
   height:                               1280
 
+tts:                                    true
+comments:                               false
 regenerate:                             false
 permalink:                              /pages/public/tools/previewer/current_theme/
 
-resources:                              [ animate, clipboard, rouge ]
+resources:                              [ animate, bmd, clipboard, rouge ]
 resource_options:
   - toccer:
-      collapseDepth:                    3
+      collapseDepth:                    4
   - attic:
       slides:
         - url:                          /assets/images/modules/attics/themes-1920x1280-bw.jpg
@@ -111,11 +117,12 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-JekyllOne is a theme for multifunctional Bootstrap-based and responsive
-websites, and offers various unique functionalities compared to other themes
-and templates for Jekyll. Themes for Bootstrap are used to customize the
-appearance of a website based on the basic rules and definitions of Bootstrap's
-CSS styles.
+J1 Template themes are used for multifunctional Bootstrap V5 websites to
+create fully responsive web pages. The Template system offers various unique
+functionalities compared to other Jekyll themes and templates.
+
+mdi:clock-time-five-outline[24px, md-gray mt-4 mb-5 mr-2]
+*15-30 Minutes* to read
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
@@ -124,13 +131,11 @@ CSS styles.
   <div id="theme" class="document-title row g-0 mt-4 mb-3"></div>
 ++++
 
-Bootstrap themes 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.
-The use or change of a style does not alter the functionality of the
-underlying Bootstrap framework but modifies, for example, the color scheme,
-fonts, or font sizes.
+Bootstrap themes are used to customize the appearance of a website founded
+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.
 
 ifeval::[{navbars} == true]
 [role="mt-5"]
@@ -141,12 +146,13 @@ your page for navigation. Bootstrap offers many navigation functions that
 are minimized on smartphones and thus always remain easy to use.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-navbar}[Bootstrap Docs {char-middot} Navbar, {browser-window--new}]
+link:{url-bs-docs--components-navbar}[Bootstrap Docs {char-emdash} Navbar, {browser-window--new}]
 
 Theming the navbar has never been easier thanks to the combination of
-theming classes and background-color utilities. Choose from `.navbar-light`
-for use with light background colors, or '.navbar-dark' for dark background
-colors. Then, customize with `.bg-*` utilities.
+theming classes and background-color utilities. Choose from the navbar light
+class `.navbar-light` for use with light background colors, or the navbar dark
+class `.navbar-dark` for dark background colors. Then, customize with the
+background utilities `.bg-*`.
 
 ++++
 <div class="doc-example mb-3">
@@ -288,6 +294,8 @@ colors. Then, customize with `.bg-*` utilities.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for NAV bars
 [source, html]
 ----
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
@@ -434,25 +442,25 @@ ifeval::[{buttons} == true]
 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.
+of buttons, a higher visiting 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:
 
-* Links (anchors)
+* Anchor links (anchors)
 * Form buttons (input)
 * General buttons (button)
 
-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.
+Defining a standard button in Bootstrap is very simple: assign the base CSS
+class for buttons `.btn` to an HTML element. The following sections describe
+the different types of available buttons and how they are to be defined.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-buttons}[Bootstrap Docs {char-middot} Buttons, {browser-window--new}]
+link:{url-bs-docs--components-buttons}[Bootstrap Docs {char-emdash} Buttons, {browser-window--new}]
 
 ifeval::[{buttons_active} == true]
+[role="mt-4"]
 === Active buttons
 
 Active buttons will appear with a darker background and border. If pressed,
@@ -472,6 +480,8 @@ a *ripple* effect is shown for feedback.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for Buttons
 [source, html]
 ----
 <button type="button" class="btn btn-primary btn-raised">Primary</button>
@@ -487,6 +497,7 @@ a *ripple* effect is shown for feedback.
 endif::[]
 
 ifeval::[{buttons_disabled} == true]
+[role="mt-4"]
 === Disabled buttons
 
 Buttons look *inactive* by adding the *disabled* boolean attribute to any
@@ -506,6 +517,8 @@ Buttons look *inactive* by adding the *disabled* boolean attribute to any
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for disabled Buttons
 [source, html]
 ----
 <button type="button" class="btn btn-primary disabled">Primary</button>
@@ -521,11 +534,12 @@ Buttons look *inactive* by adding the *disabled* boolean attribute to any
 endif::[]
 
 ifeval::[{buttons_outline} == true]
+[role="mt-4"]
 === Outline buttons
 
 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.
+the default modifier with the button outline classes `.btn-outline-*` to
+remove all background images and colors on any button.
 
 ++++
 <div class="doc-example mb-3">
@@ -541,6 +555,8 @@ background images and colors on any button.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for outline Buttons
 [source, html]
 ----
 <button type="button" class="btn btn-outline-primary">Primary</button>
@@ -556,6 +572,7 @@ background images and colors on any button.
 endif::[]
 
 ifeval::[{buttons_dropdown} == true]
+[role="mt-4"]
 === Dropdown buttons
 
 In need of a button having a little menu, buttons with a (nested)
@@ -617,6 +634,8 @@ In need of a button having a little menu, buttons with a (nested)
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for a group of Buttons
 [source, html]
 ----
   <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
@@ -639,6 +658,7 @@ endif::[]
 
 
 ifeval::[{buttons_flat} == true]
+[role="mt-4"]
 === Flat buttons
 
 *Flat* buttons are text-only buttons. They may be used in dialogs, toolbars,
@@ -657,6 +677,8 @@ on press.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for flat Buttons
 [source, html]
 ----
 <button type="button" class="btn btn-primary">Primary</button>
@@ -670,6 +692,7 @@ on press.
 endif::[]
 
 ifeval::[{buttons_sizes} == true]
+[role="mt-4"]
 === Button sizes
 
 Beside the *default* size, small and large buttons are available.
@@ -682,6 +705,8 @@ Beside the *default* size, small and large buttons are available.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for Button sizes
 [source, html]
 ----
 <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
@@ -691,6 +716,7 @@ Beside the *default* size, small and large buttons are available.
 endif::[]
 
 ifeval::[{buttons_pulsed} == true]
+[role="mt-4"]
 === Pulsed button
 
 Draw attention to a button, e.g for a *recommended* action.
@@ -701,6 +727,8 @@ Draw attention to a button, e.g for a *recommended* action.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for a pulsed Button
 [source, html]
 ----
   <button type="button" class="btn btn-primary btn-raised pulsed-z2">Primary</button>
@@ -708,6 +736,7 @@ Draw attention to a button, e.g for a *recommended* action.
 endif::[]
 
 ifeval::[{buttons_blocklevel} == true]
+[role="mt-4"]
 === Block level button
 
 Create responsive stacks of full-width *block buttons* like those in BS@4
@@ -724,6 +753,8 @@ and responsive behaviors.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for block level Buttons
 [source, html]
 ----
 <div class="d-grid gap-2">
@@ -743,6 +774,7 @@ These selection elements *replace* the default Bootstrap **toggle**-buttons
 for a better *style*.
 
 ifeval::[{selections_checkboxes} == true]
+[role="mt-4"]
 === Checkboxes
 
 Checkboxes are used if you want users to select *any* number of options
@@ -777,6 +809,8 @@ from a list of *preset* (available) options.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for Checkboxes
 [source, html]
 ----
   <div class="checkbox">
@@ -807,6 +841,7 @@ from a list of *preset* (available) options.
 endif::[]
 
 ifeval::[{selections_radio_buttons} == true]
+[role="mt-4"]
 === Radio buttons
 
 Radio buttons are used if you want to *limit* users to just *one*
@@ -841,6 +876,8 @@ selection from a list of *preset* (available) options.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for Radio Buttons
 [source, html]
 ----
   <div class="radio">
@@ -871,6 +908,7 @@ selection from a list of *preset* (available) options.
 endif::[]
 
 ifeval::[{selections_switches} == true]
+[role="mt-4"]
 === Switches
 
 You can use an *alternative* to standard J1 checkboxes: the Material Design
@@ -906,6 +944,8 @@ to select *any number* of options from a list of *preset* (available) options.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for Switches
 [source, html]
 ----
   <div class="switch">
@@ -936,6 +976,7 @@ to select *any number* of options from a list of *preset* (available) options.
 endif::[]
 
 ifeval::[{fab} == true]
+[role="mt-4"]
 === Floating Action Button (FAB)
 
 Floating Action Buttons are adopted navigation elements from mobile devices
@@ -944,7 +985,7 @@ buttons (FABs) for the web typically provide *additional* actions for a page,
 for example, in-page navigation.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-https://material.io/components/buttons-floating-action-button/android#using-fabs[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-emdash} Floating action buttons, {browser-window--new}]
 
 ++++
 <div class="doc-example mt-2 mb-4">
@@ -954,6 +995,8 @@ https://material.io/components/buttons-floating-action-button/android#using-fabs
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for a Floating Action Button
 [source, html]
 ----
   <button type="button" class="btn btn-fab btn-primary" aria-label="fab-button">
@@ -965,8 +1008,8 @@ 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.
+adding the additional CSS classes raised `raised-zX`. J1 supports 25 levels
+of raising HTML elements ranging from 0 to 24.
 
 ++++
 <div class="doc-example mt-2 mb-4">
@@ -982,6 +1025,8 @@ raising HTML elements ranging from 0 to 24.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for raised FABs
 [source, html]
 ----
   <button type="button" class="btn btn-fab btn-primary raised-z5" aria-label="fab-button">
@@ -1010,6 +1055,8 @@ captivating effect.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for a pulsed FAB
 [source, html]
 ----
   <button type="button" class="btn btn-fab btn-primary pulsed-z3" aria-label="fab-button">
@@ -1031,6 +1078,8 @@ A smaller sized, *mini* floating action button (FAB) is also available.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for a Mini FAB
 [source, html]
 ----
   <button type="button" class="btn btn-danger btn-fab btn-fab-sm" aria-label="fab-button-small">
@@ -1042,9 +1091,9 @@ 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.
+Mini FAB buttons can be *raised* as well by adding the the additional CSS
+classes raised `raised-zX`. J1 supports 25 levels of raising HTML elements
+ranging from 0 to 24.
 
 ++++
 <div class="doc-example mt-2 mb-4">
@@ -1060,6 +1109,8 @@ to 24.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for a raised mini FAB
 [source, html]
 ----
   <button type="button" class="btn btn-fab btn-fab-sm btn-primary raised-z5 mr-3" aria-label="fab-button">
@@ -1104,6 +1155,8 @@ be applied.
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for colored FAB Buttons
 [source, html]
 ----
   <button type="button" class="btn btn-fab btn-primary" aria-label="fab-button-primary">
@@ -1131,63 +1184,6 @@ be applied.
     <i class="mdi mdi-plus"></i>
   </button>
 ----
-
-++++
-<div class="doc-example mt-2 mb-4">
-  <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]
@@ -1225,13 +1221,14 @@ FAB Buttons look inactive by adding the `disabled` boolean attribute to the
 </div>
 ++++
 
+[role="mt-5"]
+.Example HTML code for disabled FAB Buttons
 [source, html]
 ----
   <button type="button" class="btn btn-fab btn-primary disabled" aria-label="fab-button">
     <i class="mdi mdi-plus"></i>
   </button>
 ----
-
 ++++
 <div class="doc-example mt-2 mb-4">
   <button type="button" class="btn btn-fab btn-fab-sm btn-primary disabled" aria-label="fab-button-primary">
@@ -1260,13 +1257,6 @@ FAB Buttons look inactive by adding the `disabled` boolean attribute to the
   </button>
 </div>
 ++++
-
-[source, html]
-----
-  <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::[]
 
@@ -1284,9 +1274,10 @@ different from the standard Bootstrap configuration using the font family of
 *Helvetica* for the default.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography, {browser-window--new}]
+link:{url-bs-docs--content-typography}[Bootstrap Docs {char-emdash} Typography, {browser-window--new}]
 
 ifeval::[{typography_headings} == true]
+[role="mt-4"]
 === Headings
 
 HTML headings provide valuable information by highlighting important topics
@@ -1334,6 +1325,7 @@ whereas the <h6> tag defines the least important heading in a document.
 endif::[]
 
 ifeval::[{typography_blockquotes} == true]
+[role="mt-4"]
 === Blockquotes
 
 The HTML element `<blockquote>` specifies a section with content quoted
@@ -1342,7 +1334,8 @@ 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`.
+blockquote elements `<blockquote>` respectively the additional CSS class
+for blockquote elements `.blockquote`.
 
 ++++
 <div class="doc-example mb-3">
@@ -1366,7 +1359,7 @@ 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[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--content-tables}[Bootstrap Docs {char-middot} Tables, {browser-window--new}]
+link:{url-bs-docs--content-tables}[Bootstrap Docs {char-emdash} Tables, {browser-window--new}]
 
 ++++
 <div class="doc-example mb-3">
@@ -1464,7 +1457,7 @@ advantage of newer input controls like email verification, number selection,
 and more.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browser-window--new}]
+link:{url-bs-docs--components-forms}[Bootstrap Docs {char-emdash} Forms, {browser-window--new}]
 
 ++++
 <div class="doc-example mb-3">
@@ -1506,9 +1499,9 @@ link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browse
 </div>
 ++++
 
-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.
+Textual form controls-like inputs `<input>`, selects `<select>`, and textarea
+elements `<textarea>` are styled with the form control class `.form-control`.
+Included are styles for general appearance, focus state, sizing, and more.
 
 ++++
 <div class="doc-example mb-3">
@@ -1543,18 +1536,8 @@ focus state, sizing, and more.
 </div>
 ++++
 
-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>
-// ++++
+For *file* inputs, swap the form control class `.form-control` to the form
+control file class `.form-control-file`.
 
 ++++
 <div class="doc-example mb-3">
@@ -1589,6 +1572,7 @@ For file inputs, swap the `.form-control` for `.form-control-file`.
 ++++
 
 ifeval::[{forms_bootstrap} == true]
+[role="mt-4"]
 === Bootstrap Forms
 
 ++++
@@ -1700,6 +1684,7 @@ ifeval::[{forms_bootstrap} == true]
 </div>
 ++++
 
+[role="mt-4"]
 === Bootstrap Inputs
 
 ++++
@@ -1781,23 +1766,24 @@ ifeval::[{navs} == true]
 == Navs
 
 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.
+base navigation class `.nav` class to the active and disabled states. Swap
+modifier classes to switch between each style.
 
-The base `.nav` component is built with a flexbox and provides a strong
+The base NAV CSS style `.nav` 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.
+overrides, for example to work with lists, link padding for larger hit
+areas, and basic disabled styling.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-navs}[Bootstrap Docs {char-middot} Navs, {browser-window--new}]
+link:{url-bs-docs--components-navs}[Bootstrap Docs {char-emdash} Navs, {browser-window--new}]
 
 ifeval::[{navs_tabs} == true]
+[role="mt-4"]
 === Tabs
 
-Tabs takes the basic nav from above and adds the `.nav-tabs` class to generate
-a tabbed interface. Use them to create tabbable regions with the BS5 tab
-JavaScript plugin.
+Tabs takes the basic nav from above and adds the tabs class `.nav-tabs` to
+generate a tabbed interface. Use them to create tabbable regions with the
+Bootstrap V5 tab JavaScript plugin.
 
 ++++
 <div class="doc-example mb-3">
@@ -1837,9 +1823,10 @@ JavaScript plugin.
 endif::[]
 
 ifeval::[{navs_pills} == true]
+[role="mt-4"]
 === Pills
 
-Take that same HTML as Tabs, but use `.nav-pills` class instead.
+Take that same HTML as Tabs, but use the NAV pills class `.nav-pills` instead.
 
 ++++
 <div class="doc-example mb-3">
@@ -1879,6 +1866,7 @@ Take that same HTML as Tabs, but use `.nav-pills` class instead.
 endif::[]
 
 ifeval::[{navs_breadcrumbs} == true]
+[role="mt-4"]
 === Breadcrumbs
 
 Breadcrumbs indicate the current page’s location within a navigational
@@ -1905,6 +1893,7 @@ Separators are automatically added in CSS through ::before and content.
 endif::[]
 
 ifeval::[{navs_pagination} == true]
+[role="mt-4"]
 === Pagination
 
 We use a large block of connected links for our pagination, making links
@@ -2005,6 +1994,7 @@ wrong.  Contrasting *Badges, static BS elememts, to raise attention e.g for
 something *new*.
 
 ifeval::[{indicators_alerts} == true]
+[role="mt-4"]
 === Alerts
 
 Alerts provide contextual feedback messages for typical user actions with the
@@ -2016,7 +2006,7 @@ button. For proper styling, use one of the eight required contextual classes
 https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {browser-window--new}]
+link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-emdash} Alerts, {browser-window--new}]
 
 ++++
 <div class="doc-example mt-2 mb-4">
@@ -2055,6 +2045,7 @@ link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {brow
 endif::[]
 
 ifeval::[{indicators_badges} == true]
+[role="mt-4"]
 === Badges
 
 Badges are small count and labeling components. They scale to match the size
@@ -2068,7 +2059,7 @@ situation, these badges may seem like random additional words or numbers
 at the end of a sentence, link, or button.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-badges}[Bootstrap Docs {char-middot} Badge, {browser-window--new}]
+link:{url-bs-docs--components-badges}[Bootstrap Docs {char-emdash} Badge, {browser-window--new}]
 
 ++++
 <div class="doc-example mt-2 mb-4">
@@ -2105,8 +2096,11 @@ 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]
@@ -2195,9 +2189,10 @@ HTML5 <progress> element, ensuring you can stack progress bars, animate them,
 and place text labels over them.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {browser-window--new}]
+link:{url-bs-docs--components-progress}[Bootstrap Docs {char-emdash} Progress, {browser-window--new}]
 
 ifeval::[{progress_basic} == true]
+[role="mt-4"]
 === Basic
 
 ++++
@@ -2208,7 +2203,8 @@ ifeval::[{progress_basic} == true]
 </div>
 ++++
 
-.Basic progressbar
+[role="mt-5"]
+.Example HTML code for a basic Progressbar
 [source, html]
 ----
   <div class="progress">
@@ -2224,6 +2220,7 @@ ifeval::[{progress_basic} == true]
 endif::[]
 
 ifeval::[{progress_contextual_alternatives} == true]
+[role="mt-4"]
 === Contextual alternatives
 
 ++++
@@ -2243,7 +2240,8 @@ ifeval::[{progress_contextual_alternatives} == true]
 </div>
 ++++
 
-.Progressbar SUCCESS
+[role="mt-5"]
+.Example HTML code for a progressbar of type SUCCESS
 [source, html]
 ----
   <div class="progress">
@@ -2258,6 +2256,7 @@ ifeval::[{progress_contextual_alternatives} == true]
 endif::[]
 
 ifeval::[{progress_multiple_bars} == true]
+[role="mt-4"]
 === Multiple bars
 
 ++++
@@ -2272,6 +2271,7 @@ ifeval::[{progress_multiple_bars} == true]
 endif::[]
 
 ifeval::[{progress_striped} == true]
+[role="mt-4"]
 === Striped
 
 ++++
@@ -2296,6 +2296,7 @@ ifeval::[{progress_striped} == true]
 endif::[]
 
 ifeval::[{progress_animated} == true]
+[role="mt-4"]
 === Animated
 
 ++++
@@ -2347,9 +2348,10 @@ they offer easy alignment and mix well with other Bootstrap components.
 They have no margin by default, so use spacing utilities as needed.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser-window--new}]
+link:{url-bs-docs--components-cards}[Bootstrap Docs {char-emdash} Card, {browser-window--new}]
 
 ifeval::[{cards_simple} == true]
+[role="mt-4"]
 === Simple cards
 ++++
 <div class="doc-example mb-3">
@@ -2481,6 +2483,7 @@ ifeval::[{cards_simple} == true]
 endif::[]
 
 ifeval::[{cards_image} == true]
+[role="mt-4"]
 === Image cards
 ++++
 <div class="doc-example mb-3">
@@ -2553,6 +2556,7 @@ Dialogs are important, interactive UI (user interface) components in Bootstrap
 to *inform* visitor of an website.
 
 ifeval::[{dialogs_modals} == true]
+[role="mt-4"]
 === Modals
 
 Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for
@@ -2562,7 +2566,7 @@ else in the document and remove scroll from the <body> so that modal
 content scrolls instead.
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-modal}[Bootstrap Docs {char-middot} Modal, {browser-window--new}]
+link:{url-bs-docs--components-modal}[Bootstrap Docs {char-emdash} Modal, {browser-window--new}]
 
 .Modal types
 [cols="3a,7a,2a", options="header", width="100%", role="rtable"]
@@ -2890,7 +2894,8 @@ closed, any tooltips and popovers within are also automatically dismissed.
 ++++
 |===
 
-.Base Modal example
+[role="mt-5"]
+.Example HTML code for a base Modal
 [source, html]
 ----
 <!-- Trigger Button (modal) -->
@@ -2942,6 +2947,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
 endif::[]
 
 ifeval::[{dialogs_popovers_tooltips} == true]
+[role="mt-4"]
 === Tooltips and Popovers
 
 Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
@@ -2949,7 +2955,7 @@ 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[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {browser-window--new}]
+link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-emdash} Tooltips, {browser-window--new}]
 
 ++++
 <div class="doc-example mb-3">
@@ -2964,7 +2970,8 @@ link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {
 </div>
 ++++
 
-.Examples for Tooltips
+[role="mt-5"]
+.Example HTML code for Tooltips
 [source, html]
 ----
   <button type="button" class="btn btn-primary btn-raised"
@@ -2990,7 +2997,7 @@ link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {
 ----
 
 mdi:bootstrap[18px, mdi-md-deep-purple-400]
-link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {browser-window--new}]
+link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-emdash} Popovers, {browser-window--new}]
 
 ++++
 <div class="doc-example mb-3">
@@ -3005,7 +3012,8 @@ link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {
 </div>
 ++++
 
-.Examples for Popovers
+[role="mt-5"]
+.Example HTML code for Popovers
 [source, html]
 ----
   <button type="button" class="btn btn-primary btn-raised"