ultimate-jekyll-manager 1.3.12 → 1.4.1

package/dist/defaults/dist/pages/test/libraries/bootstrap.html

@@ -7,35 +7,35 @@ permalink: /test/libraries/bootstrap
 sitemap:
   include: false
 meta:
-  title: "Bootstrap Components Test Page"
+  title: "Bootstrap components test page"
   description: "Test page for demonstrating Bootstrap components"
-  breadcrumb: "Bootstrap Components Test"
+  breadcrumb: "Bootstrap components test"
   index: false
 ---
 
 <section>
 <div class="container">
-  <h1 class="display-1 mb-5">Bootstrap Components Test Page</h1>
+  <h1 class="display-1 mb-5">Bootstrap components test page</h1>
 
   <!-- Core CSS Utilities -->
   <section class="p-4 rounded">
     <h2 class="border-bottom border-primary pb-2 mb-4 text-primary">🎨 Core CSS Utilities</h2>
 
-    <h3 class="mb-3">Rainbow Gradient Effects</h3>
-    <h1 class="text-gradient-rainbow">Static Rainbow Text</h1>
-    <h2 class="text-gradient-rainbow gradient-animated">Animated Rainbow Text</h2>
+    <h3 class="mb-3">Rainbow gradient effects</h3>
+    <h1 class="text-gradient-rainbow">Static rainbow text</h1>
+    <h2 class="text-gradient-rainbow gradient-animated">Animated rainbow text</h2>
     <p class="fs-4">Button Examples:</p>
-    <button class="btn btn-gradient-rainbow me-2">Static Rainbow Button</button>
-    <button class="btn btn-gradient-rainbow gradient-animated">Animated Rainbow Button</button>
+    <button class="btn btn-gradient-rainbow me-2">Static rainbow button</button>
+    <button class="btn btn-gradient-rainbow gradient-animated">Animated rainbow button</button>
     <p class="fs-4 mt-3">Background Example:</p>
-    <div class="p-3 bg-gradient-rainbow gradient-animated text-light rounded">Animated Rainbow Background</div>
+    <div class="p-3 bg-gradient-rainbow gradient-animated text-light rounded">Animated rainbow background</div>
 
-    <h3 class="mt-4 mb-3">Core Animations</h3>
+    <h3 class="mt-4 mb-3">Core animations</h3>
     <div class="row g-3">
       <div class="col-md-3">
         <div class="card animation-slide-up">
           <div class="card-body">
-            <h5>Slide Up</h5>
+            <h5>Slide up</h5>
             <p class="small">.animation-slide-up</p>
           </div>
         </div>
@@ -43,7 +43,7 @@ meta:
       <div class="col-md-3">
         <div class="card animation-fade-in">
           <div class="card-body">
-            <h5>Fade In</h5>
+            <h5>Fade in</h5>
             <p class="small">.animation-fade-in</p>
           </div>
         </div>
@@ -59,20 +59,20 @@ meta:
       <div class="col-md-3">
         <div class="card animation-popup-medium">
           <div class="card-body">
-            <h5>Popup Short</h5>
+            <h5>Popup short</h5>
             <p class="small">.animation-popup-medium</p>
           </div>
         </div>
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Hover Animations</h3>
+    <h3 class="mt-4 mb-3">Hover animations</h3>
     <div class="row g-3">
       <div class="col-md-6">
         <div class="card animation-hover-up">
           <div class="card-body text-center">
             {% uj_icon "rocket", "fa-3xl mb-2" %}
-            <h5>Hover Up</h5>
+            <h5>Hover up</h5>
             <p class="small">.animation-hover-up</p>
           </div>
         </div>
@@ -81,14 +81,14 @@ meta:
         <div class="card animation-hover-flex">
           <div class="card-body text-center">
             {% uj_icon "expand", "fa-3xl mb-2" %}
-            <h5>Hover Zoom</h5>
+            <h5>Hover zoom</h5>
             <p class="small">.animation-hover-flex</p>
           </div>
         </div>
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Continuous Animations</h3>
+    <h3 class="mt-4 mb-3">Continuous animations</h3>
     <div class="row g-3 align-items-center">
       <div class="col-md-2 text-center">
         <div class="animation-pulse p-3 bg-danger text-light rounded">
@@ -122,12 +122,12 @@ meta:
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Core Utility Classes</h3>
+    <h3 class="mt-4 mb-3">Core utility classes</h3>
     <div class="row g-3">
       <div class="col-md-6">
         <div class="card">
           <div class="card-body">
-            <h5>Filter Utilities</h5>
+            <h5>Filter utilities</h5>
             <div class="d-flex gap-3 align-items-center">
               <img src="https://via.placeholder.com/50" alt="Original" class="rounded"/>
               <img src="https://via.placeholder.com/50" alt="White" class="filter-white rounded bg-dark p-1"/>
@@ -140,7 +140,7 @@ meta:
       <div class="col-md-6">
         <div class="card">
           <div class="card-body">
-            <h5>Pointer Events</h5>
+            <h5>Pointer events</h5>
             <button class="btn btn-primary pe-none">Can't Click Me (.pe-none)</button>
             <p class="small mt-2 mb-0">Useful for preventing click events</p>
           </div>
@@ -153,110 +153,110 @@ meta:
   <section class="p-4 text-light rounded">
     <h2 class="border-bottom border-light pb-2 mb-4">✨ Classy Theme Components</h2>
 
-    <h3 class="mb-3">Glassy Effects</h3>
+    <h3 class="mb-3">Glassy effects</h3>
     <div class="p-5 bg-gradient-rainbow gradient-animated rounded mb-4">
       <div class="row g-3">
         <div class="col-12">
           <div class="bg-glassy p-4 rounded">
-            <h5 class="text-body">Glassy Background</h5>
+            <h5 class="text-body">Glassy background</h5>
             <p class="text-body">.bg-glassy - Beautiful glassmorphism effect with blur and transparency</p>
           </div>
         </div>
       </div>
     </div>
 
-    <h3 class="mb-3">Classy Gradients</h3>
+    <h3 class="mb-3">Classy gradients</h3>
     <div class="row g-3">
       <div class="col-md-4">
         <div class="p-4 bg-gradient-primary text-light rounded">
-          <h5>Primary Gradient</h5>
+          <h5>Primary gradient</h5>
           <p class="mb-0">.bg-gradient-primary</p>
         </div>
       </div>
       <div class="col-md-4">
         <div class="p-4 bg-gradient-sunset text-light rounded">
-          <h5>Sunset Gradient</h5>
+          <h5>Sunset gradient</h5>
           <p class="mb-0">.bg-gradient-sunset</p>
         </div>
       </div>
       <div class="col-md-4">
         <div class="p-4 bg-gradient-aurora text-light rounded">
-          <h5>Aurora Gradient</h5>
+          <h5>Aurora gradient</h5>
           <p class="mb-0">.bg-gradient-aurora</p>
         </div>
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Classy Text Gradients</h3>
-    <h1 class="text-gradient-aurora">Aurora Gradient Text</h1>
+    <h3 class="mt-4 mb-3">Classy text gradients</h3>
+    <h1 class="text-gradient-aurora">Aurora gradient text</h1>
 
-    <h3 class="mt-4 mb-3">Classy Shadows</h3>
+    <h3 class="mt-4 mb-3">Classy shadows</h3>
     <div class="row g-3">
       <div class="col-md-3">
         <div class="bg-white text-dark p-3 rounded shadow-soft">
-          <h6>Soft Shadow</h6>
+          <h6>Soft shadow</h6>
           <p class="small mb-0">.shadow-soft</p>
         </div>
       </div>
       <div class="col-md-3">
         <div class="bg-white text-dark p-3 rounded shadow-hover">
-          <h6>Hover Shadow</h6>
+          <h6>Hover shadow</h6>
           <p class="small mb-0">.shadow-hover (on hover)</p>
         </div>
       </div>
       <div class="col-md-3">
         <div class="bg-white text-dark p-3 rounded shadow-primary">
-          <h6>Primary Shadow</h6>
+          <h6>Primary shadow</h6>
           <p class="small mb-0">.shadow-primary</p>
         </div>
       </div>
       <div class="col-md-3">
         <div class="bg-white text-dark p-3 rounded shadow-glow">
-          <h6>Glow Shadow</h6>
+          <h6>Glow shadow</h6>
           <p class="small mb-0">.shadow-glow</p>
         </div>
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Classy Borders</h3>
+    <h3 class="mt-4 mb-3">Classy borders</h3>
     <div class="row g-3">
       <div class="col-md-4">
         <div class="bg-white text-dark p-3 border-gradient-rainbow">
-          <h6>Gradient Border Rainbow</h6>
+          <h6>Gradient border rainbow</h6>
           <p class="small mb-0">.border-gradient-rainbow</p>
         </div>
       </div>
       <div class="col-md-4">
         <div class="bg-white text-dark p-3 border-dashed">
-          <h6>Dashed Border</h6>
+          <h6>Dashed border</h6>
           <p class="small mb-0">.border-dashed</p>
         </div>
       </div>
       <div class="col-md-4">
         <div class="bg-white text-dark p-3 border-glow">
-          <h6>Glow Border</h6>
+          <h6>Glow border</h6>
           <p class="small mb-0">.border-glow</p>
         </div>
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Classy Buttons</h3>
+    <h3 class="mt-4 mb-3">Classy buttons</h3>
     <div class="d-flex flex-wrap gap-2">
-      <button class="btn btn-gradient-rainbow">Gradient Button</button>
-      <button class="btn btn-glow">Glow Button</button>
-      <button class="btn btn-glass">Glass Button</button>
-      <button class="btn btn-soft-primary">Soft Primary</button>
-      <button class="btn btn-soft-success">Soft Success</button>
-      <button class="btn btn-soft-danger">Soft Danger</button>
+      <button class="btn btn-gradient-rainbow">Gradient button</button>
+      <button class="btn btn-glow">Glow button</button>
+      <button class="btn btn-glass">Glass button</button>
+      <button class="btn btn-soft-primary">Soft primary</button>
+      <button class="btn btn-soft-success">Soft success</button>
+      <button class="btn btn-soft-danger">Soft danger</button>
     </div>
 
-    <h3 class="mt-4 mb-3">Classy Cards</h3>
+    <h3 class="mt-4 mb-3">Classy cards</h3>
     <div class="p-5 bg-gradient-rainbow gradient-animated rounded">
       <div class="row g-3">
         <div class="col-md-4">
           <div class="card hover-up">
             <div class="card-body">
-              <h5 class="card-title">Hover Card</h5>
+              <h5 class="card-title">Hover card</h5>
               <p class="card-text">.hover-up - Lifts on hover</p>
             </div>
           </div>
@@ -264,7 +264,7 @@ meta:
         <div class="col-md-4">
           <div class="card bg-glassy">
             <div class="card-body">
-              <h5 class="card-title">Glass Card</h5>
+              <h5 class="card-title">Glass card</h5>
               <p class="card-text">.bg-glassy - Glassmorphism</p>
             </div>
           </div>
@@ -272,7 +272,7 @@ meta:
         <div class="col-md-4">
           <div class="card bg-gradient">
             <div class="card-body">
-              <h5 class="card-title text-light">Gradient Card</h5>
+              <h5 class="card-title text-light">Gradient card</h5>
               <p class="card-text text-light">.bg-gradient</p>
             </div>
           </div>
@@ -285,7 +285,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Typography</h2>
 
-    <h3 class="mb-3">Display Headings</h3>
+    <h3 class="mb-3">Display headings</h3>
     <h1 class="display-1">Display 1</h1>
     <h1 class="display-2">Display 2</h1>
     <h1 class="display-3">Display 3</h1>
@@ -293,7 +293,7 @@ meta:
     <h1 class="display-5">Display 5</h1>
     <h1 class="display-6">Display 6</h1>
 
-    <h3 class="mt-4 mb-3">Regular Headings</h3>
+    <h3 class="mt-4 mb-3">Regular headings</h3>
     <h1>h1. Bootstrap heading</h1>
     <h2>h2. Bootstrap heading</h2>
     <h3>h3. Bootstrap heading</h3>
@@ -301,10 +301,10 @@ meta:
     <h5>h5. Bootstrap heading</h5>
     <h6>h6. Bootstrap heading</h6>
 
-    <h3 class="mt-4 mb-3">Lead Text</h3>
+    <h3 class="mt-4 mb-3">Lead text</h3>
     <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
 
-    <h3 class="mt-4 mb-3">Font Sizes</h3>
+    <h3 class="mt-4 mb-3">Font sizes</h3>
     <p class="fs-1">Font size 1</p>
     <p class="fs-2">Font size 2</p>
     <p class="fs-3">Font size 3</p>
@@ -325,7 +325,7 @@ meta:
     <p class="text-decoration-line-through">Line through text</p>
     <p class="text-decoration-none">No decoration text</p>
 
-    <h3 class="mt-4 mb-3">Text Transform</h3>
+    <h3 class="mt-4 mb-3">Text transform</h3>
     <p class="text-lowercase">LOWERCASED TEXT</p>
     <p class="text-uppercase">uppercased text</p>
     <p class="text-capitalize">capitalized text</p>
@@ -335,7 +335,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Colors</h2>
 
-    <h3 class="mb-3">Text Colors</h3>
+    <h3 class="mb-3">Text colors</h3>
     <p class="text-primary">.text-primary</p>
     <p class="text-secondary">.text-secondary</p>
     <p class="text-success">.text-success</p>
@@ -350,7 +350,7 @@ meta:
     <p class="text-black-50">.text-black-50</p>
     <p class="text-white-50 bg-dark">.text-white-50</p>
 
-    <h3 class="mt-4 mb-3">Background Colors</h3>
+    <h3 class="mt-4 mb-3">Background colors</h3>
     <div class="row g-2">
       <div class="col-md-4">
         <div class="p-3 mb-2 bg-primary text-light">.bg-primary</div>
@@ -387,7 +387,7 @@ meta:
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Background Gradients</h3>
+    <h3 class="mt-4 mb-3">Background gradients</h3>
     <div class="row g-2">
       <div class="col-md-4">
         <div class="p-3 mb-2 bg-primary bg-gradient text-light">.bg-primary.bg-gradient</div>
@@ -409,7 +409,7 @@ meta:
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Background Opacity</h3>
+    <h3 class="mt-4 mb-3">Background opacity</h3>
     <div class="row g-2">
       <div class="col">
         <div class="bg-primary p-2 text-light">100% opacity</div>
@@ -433,7 +433,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Buttons</h2>
 
-    <h3 class="mb-3">Solid Buttons</h3>
+    <h3 class="mb-3">Solid buttons</h3>
     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-secondary">Secondary</button>
     <button type="button" class="btn btn-success">Success</button>
@@ -444,7 +444,7 @@ meta:
     <button type="button" class="btn btn-dark">Dark</button>
     <button type="button" class="btn btn-link">Link</button>
 
-    <h3 class="mt-4 mb-3">Outline Buttons</h3>
+    <h3 class="mt-4 mb-3">Outline buttons</h3>
     <button type="button" class="btn btn-outline-primary">Primary</button>
     <button type="button" class="btn btn-outline-secondary">Secondary</button>
     <button type="button" class="btn btn-outline-success">Success</button>
@@ -454,25 +454,25 @@ meta:
     <button type="button" class="btn btn-outline-light">Light</button>
     <button type="button" class="btn btn-outline-dark">Dark</button>
 
-    <h3 class="mt-4 mb-3">Adaptive Buttons (Theme-Aware)</h3>
+    <h3 class="mt-4 mb-3">Adaptive buttons (Theme-Aware)</h3>
     <p class="text-muted">These buttons automatically adapt to light/dark mode. Use instead of btn-light/btn-dark.</p>
     <button type="button" class="btn btn-adaptive">Adaptive</button>
-    <button type="button" class="btn btn-outline-adaptive">Outline Adaptive</button>
-    <button type="button" class="btn btn-adaptive-inverse">Adaptive Inverse</button>
-    <button type="button" class="btn btn-outline-adaptive-inverse">Outline Adaptive Inverse</button>
+    <button type="button" class="btn btn-outline-adaptive">Outline adaptive</button>
+    <button type="button" class="btn btn-adaptive-inverse">Adaptive inverse</button>
+    <button type="button" class="btn btn-outline-adaptive-inverse">Outline adaptive inverse</button>
 
-    <h3 class="mt-4 mb-3">Button Sizes</h3>
+    <h3 class="mt-4 mb-3">Button sizes</h3>
     <button type="button" class="btn btn-primary btn-lg">Large button</button>
     <button type="button" class="btn btn-primary">Default button</button>
     <button type="button" class="btn btn-primary btn-sm">Small button</button>
 
-    <h3 class="mt-4 mb-3">Block Buttons</h3>
+    <h3 class="mt-4 mb-3">Block buttons</h3>
     <div class="d-grid gap-2 col-6">
       <button class="btn btn-primary" type="button">Block button</button>
       <button class="btn btn-outline-primary" type="button">Block outline button</button>
     </div>
 
-    <h3 class="mt-4 mb-3">Button States</h3>
+    <h3 class="mt-4 mb-3">Button states</h3>
     <button type="button" class="btn btn-primary">Normal</button>
     <button type="button" class="btn btn-primary active">Active</button>
     <button type="button" class="btn btn-primary" disabled>Disabled</button>
@@ -518,7 +518,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Badges</h2>
 
-    <h3 class="mb-3">Regular Badges</h3>
+    <h3 class="mb-3">Regular badges</h3>
     <span class="badge bg-primary">Primary</span>
     <span class="badge bg-secondary">Secondary</span>
     <span class="badge bg-success">Success</span>
@@ -528,7 +528,7 @@ meta:
     <span class="badge bg-light text-dark">Light</span>
     <span class="badge bg-dark">Dark</span>
 
-    <h3 class="mt-4 mb-3">Pill Badges</h3>
+    <h3 class="mt-4 mb-3">Pill badges</h3>
     <span class="badge rounded-pill bg-primary">Primary</span>
     <span class="badge rounded-pill bg-secondary">Secondary</span>
     <span class="badge rounded-pill bg-success">Success</span>
@@ -582,7 +582,7 @@ meta:
 
     <div class="row">
       <div class="col-md-6">
-        <h3 class="mb-3">Form Controls</h3>
+        <h3 class="mb-3">Form controls</h3>
         <div class="mb-3">
           <label for="exampleFormControlInput1" class="form-label">Email address</label>
           <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
@@ -707,7 +707,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Tables</h2>
 
-    <h3 class="mb-3">Basic Table</h3>
+    <h3 class="mb-3">Basic table</h3>
     <table class="table">
       <thead>
         <tr>
@@ -733,7 +733,7 @@ meta:
       </tbody>
     </table>
 
-    <h3 class="mt-4 mb-3">Table Variants</h3>
+    <h3 class="mt-4 mb-3">Table variants</h3>
     <table class="table table-striped table-hover">
       <thead class="table-dark">
         <tr>
@@ -768,7 +768,7 @@ meta:
 
   <!-- Progress -->
   <section>
-    <h2 class="border-bottom pb-2 mb-4">Progress Bars</h2>
+    <h2 class="border-bottom pb-2 mb-4">Progress bars</h2>
 
     <div class="progress mb-3">
       <div class="progress-bar" role="progressbar" style="width: 25%">25%</div>
@@ -783,7 +783,7 @@ meta:
       <div class="progress-bar bg-warning" role="progressbar" style="width: 90%">90%</div>
     </div>
     <div class="progress mb-3" style="height: 30px;">
-      <div class="progress-bar bg-danger" role="progressbar" style="width: 100%">Large Progress Bar</div>
+      <div class="progress-bar bg-danger" role="progressbar" style="width: 100%">Large progress bar</div>
     </div>
     <div class="progress">
       <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%">Animated</div>
@@ -794,7 +794,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Spinners</h2>
 
-    <h3 class="mb-3">Border Spinner</h3>
+    <h3 class="mb-3">Border spinner</h3>
     <div class="spinner-border text-primary" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
@@ -814,7 +814,7 @@ meta:
       <span class="visually-hidden">Loading...</span>
     </div>
 
-    <h3 class="mt-4 mb-3">Growing Spinner</h3>
+    <h3 class="mt-4 mb-3">Growing spinner</h3>
     <div class="spinner-grow text-primary" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
@@ -828,7 +828,7 @@ meta:
       <span class="visually-hidden">Loading...</span>
     </div>
 
-    <h3 class="mt-4 mb-3">Spinner Sizes</h3>
+    <h3 class="mt-4 mb-3">Spinner sizes</h3>
     <div class="spinner-border spinner-border-sm" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
@@ -837,13 +837,13 @@ meta:
     </div>
   </section>
 
-  <!-- List Groups -->
+  <!-- List groups -->
   <section>
-    <h2 class="border-bottom pb-2 mb-4">List Groups</h2>
+    <h2 class="border-bottom pb-2 mb-4">List groups</h2>
 
     <div class="row">
       <div class="col-md-6">
-        <h3 class="mb-3">Basic List Group</h3>
+        <h3 class="mb-3">Basic list group</h3>
         <ul class="list-group">
           <li class="list-group-item">An item</li>
           <li class="list-group-item active">An active item</li>
@@ -1027,7 +1027,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Pagination</h2>
 
-    <h3 class="mb-3">Default Pagination</h3>
+    <h3 class="mb-3">Default pagination</h3>
     <nav aria-label="Page navigation">
       <ul class="pagination">
         <li class="page-item"><a class="page-link" href="#">Previous</a></li>
@@ -1038,7 +1038,7 @@ meta:
       </ul>
     </nav>
 
-    <h3 class="mb-3">Pagination Sizes</h3>
+    <h3 class="mb-3">Pagination sizes</h3>
     <nav aria-label="Large pagination">
       <ul class="pagination pagination-lg">
         <li class="page-item active" aria-current="page">
@@ -1101,7 +1101,7 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Navs & Tabs</h2>
 
-    <h3 class="mb-3">Nav Tabs</h3>
+    <h3 class="mb-3">Nav tabs</h3>
     <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
       <li class="nav-item" role="presentation">
         <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button">Home</button>
@@ -1128,7 +1128,7 @@ meta:
       </div>
     </div>
 
-    <h3 class="mt-4 mb-3">Nav Pills</h3>
+    <h3 class="mt-4 mb-3">Nav pills</h3>
     <ul class="nav nav-pills mb-3">
       <li class="nav-item">
         <a class="nav-link active" aria-current="page" href="#">Active</a>
@@ -1199,14 +1199,14 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Borders</h2>
 
-    <h3 class="mb-3">Border Styles</h3>
+    <h3 class="mb-3">Border styles</h3>
     <div class="p-3 mb-2 bg-light border">Regular border</div>
     <div class="p-3 mb-2 bg-light border-top">Border top</div>
     <div class="p-3 mb-2 bg-light border-end">Border end</div>
     <div class="p-3 mb-2 bg-light border-bottom">Border bottom</div>
     <div class="p-3 mb-2 bg-light border-start">Border start</div>
 
-    <h3 class="mt-4 mb-3">Border Colors</h3>
+    <h3 class="mt-4 mb-3">Border colors</h3>
     <div class="p-3 mb-2 bg-light border border-primary">Primary border</div>
     <div class="p-3 mb-2 bg-light border border-secondary">Secondary border</div>
     <div class="p-3 mb-2 bg-light border border-success">Success border</div>
@@ -1214,7 +1214,7 @@ meta:
     <div class="p-3 mb-2 bg-light border border-warning">Warning border</div>
     <div class="p-3 mb-2 bg-light border border-info">Info border</div>
 
-    <h3 class="mt-4 mb-3">Border Width</h3>
+    <h3 class="mt-4 mb-3">Border width</h3>
     <div class="p-3 mb-2 bg-light border border-1">Border width 1</div>
     <div class="p-3 mb-2 bg-light border border-2">Border width 2</div>
     <div class="p-3 mb-2 bg-light border border-3">Border width 3</div>
@@ -1237,10 +1237,10 @@ meta:
     <h2 class="border-bottom pb-2 mb-4">Position</h2>
 
     <div class="position-relative p-5 bg-light">
-      <div class="position-absolute top-0 start-0 p-2 bg-primary text-light">Top Start</div>
-      <div class="position-absolute top-0 end-0 p-2 bg-success text-light">Top End</div>
-      <div class="position-absolute bottom-0 start-0 p-2 bg-danger text-light">Bottom Start</div>
-      <div class="position-absolute bottom-0 end-0 p-2 bg-warning text-dark">Bottom End</div>
+      <div class="position-absolute top-0 start-0 p-2 bg-primary text-light">Top start</div>
+      <div class="position-absolute top-0 end-0 p-2 bg-success text-light">Top end</div>
+      <div class="position-absolute bottom-0 start-0 p-2 bg-danger text-light">Bottom start</div>
+      <div class="position-absolute bottom-0 end-0 p-2 bg-warning text-dark">Bottom end</div>
       <div class="position-absolute top-50 start-50 translate-middle p-2 bg-info text-dark">Center</div>
     </div>
   </section>
@@ -1249,14 +1249,14 @@ meta:
   <section>
     <h2 class="border-bottom pb-2 mb-4">Flexbox</h2>
 
-    <h3 class="mb-3">Flex Direction</h3>
+    <h3 class="mb-3">Flex direction</h3>
     <div class="d-flex flex-row mb-3 bg-light">
       <div class="p-2 bg-primary text-light">Flex item 1</div>
       <div class="p-2 bg-success text-light">Flex item 2</div>
       <div class="p-2 bg-danger text-light">Flex item 3</div>
     </div>
 
-    <h3 class="mt-4 mb-3">Justify Content</h3>
+    <h3 class="mt-4 mb-3">Justify content</h3>
     <div class="d-flex justify-content-start mb-2 bg-light">
       <div class="p-2 bg-primary text-light">Start</div>
     </div>
@@ -1280,9 +1280,9 @@ meta:
     </div>
   </section>
 
-  <!-- Cursor Utilities -->
+  <!-- Cursor utilities -->
   <section>
-    <h2 class="border-bottom pb-2 mb-4">Cursor Utilities</h2>
+    <h2 class="border-bottom pb-2 mb-4">Cursor utilities</h2>
     <p class="text-muted mb-4">Test all CSS cursor classes. Hover over each box to see the cursor. If the cursor doesn't change, that class needs to be added to the theme utilities.</p>
 
     <h3 class="mb-3">General</h3>
@@ -1492,7 +1492,7 @@ meta:
 
   <!-- Grid -->
   <section>
-    <h2 class="border-bottom pb-2 mb-4">Grid System</h2>
+    <h2 class="border-bottom pb-2 mb-4">Grid system</h2>
 
     <div class="row mb-3">
       <div class="col">
@@ -1508,16 +1508,16 @@ meta:
 
     <div class="row mb-3">
       <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-        <div class="p-3 bg-primary text-light mb-3">Responsive Column</div>
+        <div class="p-3 bg-primary text-light mb-3">Responsive column</div>
       </div>
       <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-        <div class="p-3 bg-secondary text-light mb-3">Responsive Column</div>
+        <div class="p-3 bg-secondary text-light mb-3">Responsive column</div>
       </div>
       <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-        <div class="p-3 bg-success text-light mb-3">Responsive Column</div>
+        <div class="p-3 bg-success text-light mb-3">Responsive column</div>
       </div>
       <div class="col-12 col-sm-6 col-md-12 col-lg-3">
-        <div class="p-3 bg-danger text-light mb-3">Responsive Column</div>
+        <div class="p-3 bg-danger text-light mb-3">Responsive column</div>
       </div>
     </div>
   </section>