j1-template 2022.0.1 → 2022.0.5

data/lib/starter_web/pages/_test_pages/_includes/documents/419_advanced_modals_demo.asciidoc

@@ -16,8 +16,8 @@
           <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
         </div>
         <div class="row px-4">
-          <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
         </div>
       </div>
     </div>
@@ -40,7 +40,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -54,8 +54,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -77,7 +77,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Info</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -90,8 +90,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -113,8 +113,8 @@
       <!-- Body -->
       <div class="modal-body">
         <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
-          <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-          <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
         </div>
       </div>
     </div>
@@ -137,7 +137,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Danger</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -156,8 +156,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -179,7 +179,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Warning</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -200,8 +200,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer justify-content-center">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -223,7 +223,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -263,8 +263,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->
@@ -286,7 +286,7 @@
       <!--Header-->
       <div class="modal-header">
         <p class="lead">Modal Success</p>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
           <i class="mdi mdi-close mdi-dark mdi-48px"></i>
         </button>
       </div>
@@ -326,8 +326,8 @@
       </div>
       <!-- Footer -->
       <div class="modal-footer">
-        <a type="button" class="btn btn-raised btn-primary mr-2">Yes, please</a>
-        <a type="button" class="btn btn-outline-secondary" data-dismiss="modal">No, thanks</a>
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
       </div>
     </div>
     <!-- END Content -->

data/lib/starter_web/pages/_test_pages/accordion-01-tester.adoc

@@ -85,7 +85,7 @@ lorem:sentences[5]
     <div class="card">
       <div class="card-header" id="headingOne">
         <h5 class="mb-0">
-          <button class="btn btn-link" data-bs-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Lorem Item #1
           </button>
         </h5>
@@ -100,7 +100,7 @@ lorem:sentences[5]
     <div class="card">
       <div class="card-header" id="headingTwo">
         <h5 class="mb-0">
-          <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+          <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
             Lorem Item  Item #2
           </button>
         </h5>
@@ -114,7 +114,7 @@ lorem:sentences[5]
     <div class="card">
       <div class="card-header" id="headingThree">
         <h5 class="mb-0">
-          <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+          <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
             Lorem Item  Item #3
           </button>
         </h5>

data/lib/starter_web/pages/_test_pages/accordion-02-tester.adoc

@@ -90,7 +90,7 @@ lorem:sentences[5]
         <!-- Accordion item 1 -->
         <div class="card">
           <div id="headingOne" class="card-header bg-white shadow-sm border-0">
-            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="d-block position-relative text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #1</a></h6>
+            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="d-block position-relative text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #1</a></h6>
           </div>
           <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
             <div class="card-body p-5">
@@ -102,7 +102,7 @@ lorem:sentences[5]
         <!-- Accordion item 2 -->
         <div class="card">
           <div id="headingTwo" class="card-header bg-white shadow-sm border-0">
-            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #2</a></h6>
+            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #2</a></h6>
           </div>
           <div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse">
             <div class="card-body p-5">
@@ -114,7 +114,7 @@ lorem:sentences[5]
         <!-- Accordion item 3 -->
         <div class="card">
           <div id="headingThree" class="card-header bg-white shadow-sm border-0">
-            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #3</a></h6>
+            <h6 class="mb-0 font-weight-bold"><a href="#void" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="d-block position-relative collapsed text-dark text-uppercase collapsible-link py-2">Collapsible Group Item #3</a></h6>
           </div>
           <div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse">
             <div class="card-body p-5">

data/lib/starter_web/pages/_test_pages/accordion-03-tester.adoc

@@ -88,7 +88,7 @@ lorem:sentences[5]
 			<div class="card">
 				<div class="card-header" id="headingOne">
 					<h2 class="clearfix mb-0">
-						<a class="btn btn-link" data-bs-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-chevron-circle-down"></i> What is Bootstrap Framework?</a>
+						<a class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-chevron-circle-down"></i> What is Bootstrap Framework?</a>
 					</h2>
 				</div>
 				<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
@@ -98,7 +98,7 @@ lorem:sentences[5]
 			<div class="card">
 				<div class="card-header" id="headingTwo">
 					<h2 class="mb-0">
-						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="fa fa-chevron-circle-down"></i> How to Create Responsive Website with Bootstrap?</a>
+						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="fa fa-chevron-circle-down"></i> How to Create Responsive Website with Bootstrap?</a>
 					</h2>
 				</div>
 				<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
@@ -108,7 +108,7 @@ lorem:sentences[5]
 			<div class="card">
 				<div class="card-header" id="headingThree">
 					<h2 class="mb-0">
-						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="fa fa-chevron-circle-down"></i> Does Bootstrap Framework Provide Cross-browser Support?</a>
+						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="fa fa-chevron-circle-down"></i> Does Bootstrap Framework Provide Cross-browser Support?</a>
 					</h2>
 				</div>
 				<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
@@ -118,7 +118,7 @@ lorem:sentences[5]
 			<div class="card">
 				<div class="card-header" id="headingFour">
 					<h2 class="mb-0">
-						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-chevron-circle-down"></i> Can I Use Bootstrap for Mobile App Development?</a>
+						<a class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-chevron-circle-down"></i> Can I Use Bootstrap for Mobile App Development?</a>
 					</h2>
 				</div>
 				<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">

data/lib/starter_web/pages/_test_pages/backdrop-tester.adoc

@@ -80,21 +80,21 @@ resource_options:
     </div>
     <!-- Footer|Button row -->
     <div class="mt-1 text-center">
-      <a href="/pages/public/learn/roundtrip/present_images/" class="btn btn-raised btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
+      <a href="/pages/public/learn/roundtrip/present_images/" class="btn btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
         <i class="mdi mdi-briefcase-search-outline mdi-3x mdi- mr-3"></i>
         <span class="float-right text-left mt-2">
           Roundtrip
           <span class="d-block r-text-200 text-lowercase">learn top features</span>
         </span>
       </a>
-      <a href="https://rubygems.org/gems/j1-template" target="blank" rel="noopener" class="btn btn-raised btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
+      <a href="https://rubygems.org/gems/j1-template" target="blank" rel="noopener" class="btn btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
         <i class="mdi mdi-briefcase-download-outline mdi-3x mdi- mr-3"></i>
         <span class="float-right text-left mt-2">
           Download
           <span class="d-block r-text-200 text-lowercase">get on rubygems</span>
         </span>
       </a>
-      <a href="https://jekyll.one/pages/public/learn/quickstart/" target="blank" rel="noopener" class="btn btn-raised btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
+      <a href="https://jekyll.one/pages/public/learn/quickstart/" target="blank" rel="noopener" class="btn btn-xl btn-primary text-uppercase text-left mr-2 mb-2" style="min-width: 250px">
         <i class="mdi mdi-briefcase-check-outline mdi-3x mdi- mr-3"></i>
         <span class="float-right text-left mt-2">
           Quickstart

data/lib/starter_web/pages/_test_pages/button-tester-1.adoc

@@ -61,14 +61,14 @@ resource_options:
 ++++
 <div>
 
-  <a href="#void" class="btn btn-raised btn-xl btn-primary text-uppercase mr-2 mb-2">
+  <a href="#void" class="btn btn-xl btn-primary text-uppercase mr-2 mb-2">
   	<i class="mdi mdi-language-ruby mdi-3x mr-2"></i>
   	<span class="float-right text-left mt-2">Let's Use this Button
   		<span class="d-block r-text-200">30 days free for all users</span>
   	</span>
   </a>
 
-  <a href="#void" class="btn btn-raised btn-xl btn-primary text-uppercase mr-2 mb-2">
+  <a href="#void" class="btn btn-xl btn-primary text-uppercase mr-2 mb-2">
   	<i class="mdi mdi-language-ruby mdi-3x mr-2"></i>
   	<span class="float-right text-left mt-2">Let's Use this Button
   		<span class="d-block r-text-200">30 days free for all users</span>

data/lib/starter_web/pages/_test_pages/cookieConsent.adoc

@@ -61,7 +61,7 @@ resource_options:
     show the Dialog again with <code>cookieSettings.showDialog()</code>.
   </p>
   <p>
-    <a href="javascript:showSettingsDialog()" class="btn btn-primary btn-raised">Cookie Settings</a>
+    <a href="javascript:showSettingsDialog()" class="btn btn-primary">Cookie Settings</a>
   </p>
   <h2>Read the settings</h2>
   <p>Read all cookie settings with <code>cookieSettings.getSettings()</code></p>

data/lib/starter_web/pages/_test_pages/infinite-scroll-tester.adoc

@@ -92,7 +92,7 @@ lorem:sentences[5]
           <div id="accordion" class="myaccordion w-100">
             <div class="card">
               <div class="card-header p-0" id="headingOne">
-                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link" data-bs-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                   <div class="heading d-flex align-items-center">
                     <h3 class="mb-0">How to manage account?</h3>
                   </div>
@@ -109,7 +109,7 @@ lorem:sentences[5]
             </div>
             <div class="card">
               <div class="card-header p-0" id="headingTwo">
-                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link collapsed" data-bs-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                   <div class="heading d-flex align-items-center">
                     <h3 class="mb-0">How to become Pro</h3>
                   </div>
@@ -126,7 +126,7 @@ lorem:sentences[5]
             </div>
             <div class="card">
               <div class="card-header p-0" id="headingThree">
-                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link collapsed" data-bs-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                <button class="d-flex pl-4 align-items-center justify-content-between btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                   <div class="heading d-flex align-items-center">
                     <h3 class="mb-0">How to create an account?</h3>
                   </div>

data/lib/starter_web/pages/public/asciidoc_skeletons/documentation/documentation.adoc

@@ -25,7 +25,7 @@ robots:
 permalink:                              /pages/public/skeleton/documentation/
 regenerate:                             false
 
-resources:                              [ clipboard, lightbox, rouge ]
+resources:                              [ clipboard, lightbox, rouge, animate ]
 resource_options:
   - toccer:
       collapseDepth:                    4

data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc

@@ -23,7 +23,7 @@ robots:
 permalink:                              /pages/public/skeleton/multi/
 regenerate:                             false
 
-resources:                              [ lightbox, clipboard, rouge ]
+resources:                              [ lightbox, clipboard, rouge, animate ]
 resource_options:
   - toccer:
       collapseDepth:                    4

data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc

@@ -22,7 +22,7 @@ robots:
 permalink:                              /pages/public/skeleton/simple/
 regenerate:                             false
 
-resources:                              [ clipboard, rouge ]
+resources:                              [ clipboard, rouge, animate ]
 resource_options:
   - toccer:
       collapseDepth:                    4

data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html

@@ -247,24 +247,3 @@ site_category_word_list:    {{site_category_word_list | debug}}
       {% endfor %}
   {% endfor %}
 </div>
-
-++++
-<script>
-  $(function () {
-    var logger          = log4javascript.getLogger('j1.blog.scroller');
-    var scrollOffset    = j1.getScrollOffset();
-    var scrollDuration  = 300;
-    var anchor_id;
-
-    $('.badge-tag').on('click', function (e) {
-      e.preventDefault();
-      anchor_id = e.target.hash;
-      logger.debug('\n' + 'badge clicked: ' + anchor_id);
-
-      $('html, body').animate({
-        scrollTop: $(anchor_id).offset().top + scrollOffset
-      }, scrollDuration);
-    });
-  }); //END page ready
-</script>
-++++

data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html

@@ -22,7 +22,7 @@ comments:                               false
 exclude_from_search:                    true
 regenerate:                             true
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html

@@ -23,6 +23,7 @@ comments:                               false
 exclude_from_search:                    true
 regenerate:                             false
 
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/blog/navigator/archive.html

@@ -22,7 +22,7 @@ comments:                               false
 exclude_from_search:                    true
 regenerate:                             true
 
-resources:                              []
+resources:                              [ animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/learn/quickstart.adoc

@@ -17,7 +17,7 @@ fab_menu_id:                            page_ctrl_simple
 permalink:                              /pages/public/learn/quickstart/
 regenerate:                             false
 
-resources:                              [ clipboard, rouge ]
+resources:                              [ clipboard, rouge, animate ]
 resource_options:
   - attic:
       padding_top:                      400

data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc

@@ -67,9 +67,8 @@ as something like images.
 
 == Responsive Text
 
-Sadly, one common flaw is seen in many templates and frameworks (sadly to say:
-the same to Bootstrap, including V4{fn-bootstrap-v5--responsive-text}) is a
-lack of support for genuinely responsive text. While elements on a page resize
+Sadly, one common flaw is seen in many templates and frameworks: a lack of
+support for genuinely responsive text. While elements on a page resize
 fluidly, the text still resizes on a fixed basis. To avoid this issue,
 especially for heavily text-focused pages, J1 Template supports styles that
 fluidly scale text size and line height to optimize readability for the user.
@@ -80,7 +79,7 @@ what will happen in terms of responsiveness.
 
 ++++
 <div>
-  <button type="button" name="toggle-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
+  <button type="button" name="toggle-r-text" class="btn btn-primary btn-flex mt-3 mb-3">
     <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Toggle rtext
   </button>
@@ -137,7 +136,7 @@ responsiveness in action.
 
 ++++
 <div>
-  <button type="button" name="scale-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
+  <button type="button" name="scale-r-text" class="btn btn-primary btn-flex mt-3 mb-3">
     <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-bg-primary-50 mr-1"></i>
     Scale rtext
   </button>

data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc

@@ -81,7 +81,7 @@ include::{documentdir}/410_table_bs_modal_examples.asciidoc[]
 
 == What next
 
-Bootstrap is a helpful framework that offers in the current V4
+Bootstrap is a helpful framework that offers in the current V5
 version a complete set of styles to create excellent responsive designs.
 In the sense of all can be improved, the responsive tables support of BS
 needs some enhancement to display tables on low-resolution devices or smaller

data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc

@@ -57,7 +57,7 @@ resource_options:
 // -----------------------------------------------------------------------------
 Themes for the template system J1 are based on the free and open-source CSS
 front-end framework {url-bs--home}[Bootstrap, {browser-window--new}] of
-version V4.
+version V5.
 
 Bootstrap is an HTML, CSS & JS Library that focuses on simplifying the
 development of modern web pages. The primary purpose of applying the
@@ -158,7 +158,7 @@ Make a selection of a theme below to preview.
   <!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
   <!-- NOTE: control the behaviour of popper.js for positioning -->
   <!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
-  <button class="btn btn-primary btn-raised btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-toggle="dropdown" data-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
+  <button class="btn btn-primary btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-bs-toggle="dropdown" data-bs-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
   Select Theme<span class="caret"></span>
   </button>
   <ul class="dropdown-menu scrollable-menu" role="menu">

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_bottom_info.asciidoc

@@ -5,9 +5,9 @@
 <div class="ml-2">
   <!-- Button trigger modal -->
   <button type="button"
-    class="btn btn-primary btn-raised"
-    data-toggle="modal"
-    data-target="#frameModalBottomSuccessDemo">
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#frameModalBottomSuccessDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_bottom_left_warning.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalBLWarningDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_bottom_right_danger.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalBRDangerDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_central_success.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centralModalSuccessDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_full_height_left_info.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fluidModalLeftInfoDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_full_height_right_success.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fluidModalRightSuccessDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_top_info.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#frameModalTopInfoDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_top_left_info.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalTLInfoDemo">
     Launch Example
   </button>
 </div>

data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/410_top_right_success.asciidoc

@@ -4,7 +4,7 @@
 ++++
 <div class="ml-2">
   <!-- Button trigger modal -->
-  <button type="button" class="btn btn-primary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalTRSuccessDemo">
     Launch Example
   </button>
 </div>