j1-template 2022.0.1 → 2022.0.2

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/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>

data/lib/starter_web/pages/public/learn/roundtrip/_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,22 +40,22 @@
       <!--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>
       <!-- Body -->
       <div class="modal-body">
         <div class="text-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
       </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>
@@ -146,7 +146,7 @@
         <div class="row">
           <div class="col-3">
             <p></p>
-            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+            <p class="text-center"><i class="mdi mdi-cart md-gray-600 fa-4x"></i></p>
           </div>
           <div class="col-9">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
@@ -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,48 +223,48 @@
       <!--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>
       <!-- Body -->
       <div class="modal-body">
         <div class="text-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <ul class="list-group z-depth-0">
-          <li class="list-group-item justify-content-between">
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary rounded-pill">1</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary rounded-pill">2</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary rounded-pill">3</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary rounded-pill">4</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary rounded-pill">5</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary rounded-pill">6</span>
           </li>
         </ul>
       </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,48 +286,48 @@
       <!--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>
       <!-- Body -->
       <div class="modal-body">
         <div class="text-center">
-          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
           </p>
         </div>
-        <ul class="list-group z-depth-0">
-          <li class="list-group-item justify-content-between">
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary badge-pill">1</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
             <span class="badge badge-primary badge-pill">2</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary badge-pill">3</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Cras justo odio
-            <span class="badge badge-primary badge-pill">14</span>
+            <span class="badge badge-primary badge-pill">4</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Dapibus ac facilisis in
-            <span class="badge badge-primary badge-pill">2</span>
+            <span class="badge badge-primary badge-pill">5</span>
           </li>
-          <li class="list-group-item justify-content-between">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
             Morbi leo risus
-            <span class="badge badge-primary badge-pill">1</span>
+            <span class="badge badge-primary badge-pill">6</span>
           </li>
         </ul>
       </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/public/legal/de/300_privacy.adoc

@@ -145,16 +145,16 @@ System befinden. In diesem Fall sind möglicherweise bereits vorhandene Cookies
 *manuell* über Funktionen Ihres Browsers zu löschen.
 
 ++++
-<div class="mt-4 mb-3">
+<div class="mt-4 mb-4 d-grid gap-2">
   <a  href="javascript:j1.cookieConsent.showDialog()"
-      class="btn btn-primary btn-lg btn-block btn-raised btn-flex mb-3"
-      aria-label="Cookie Consent"
-      style="min-width: 25rem">
+      class="btn btn-primary btn-flex btn-lg"
+      aria-label="Cookie Consent">
       <i class="mdi mdi-cookie mdi-2x mr-2"></i>
       Ihre Einstellungen
   </a>
 </div>
 ++++
+
 endif::[]
 
 ifeval::[{logs-files} == true]

data/lib/starter_web/pages/public/legal/en/300_privacy.adoc

@@ -138,11 +138,10 @@ cases, cookies already be present and needs to be *manually* deleted by
 functions of your browser.
 
 ++++
-<div class="mt-4 mb-3">
+<div class="mt-4 mb-4 d-grid gap-2">
   <a  href="javascript:j1.cookieConsent.showDialog()"
-      class="btn btn-primary btn-lg btn-block btn-raised btn-flex mb-3"
-      aria-label="Cookie Consent"
-      style="min-width: 25rem">
+      class="btn btn-primary btn-flex btn-lg"
+      aria-label="Cookie Consent">
       <i class="mdi mdi-cookie mdi-2x mr-2"></i>
       Your settings
   </a>