diff --git a/dist/css/bootstrap-grid.css.map b/dist/css/bootstrap-grid.css.map
index b74a7c5b2..73d65ea96 100644
Binary files a/dist/css/bootstrap-grid.css.map and b/dist/css/bootstrap-grid.css.map differ
diff --git a/dist/css/bootstrap-grid.rtl.css.map b/dist/css/bootstrap-grid.rtl.css.map
index c6637b1df..1ade19c2c 100644
Binary files a/dist/css/bootstrap-grid.rtl.css.map and b/dist/css/bootstrap-grid.rtl.css.map differ
diff --git a/dist/css/bootstrap-reboot.css.map b/dist/css/bootstrap-reboot.css.map
index 6b3b5be7e..80bd8503c 100644
Binary files a/dist/css/bootstrap-reboot.css.map and b/dist/css/bootstrap-reboot.css.map differ
diff --git a/dist/css/bootstrap-reboot.rtl.css.map b/dist/css/bootstrap-reboot.rtl.css.map
index 6132f7648..0b860fd61 100644
Binary files a/dist/css/bootstrap-reboot.rtl.css.map and b/dist/css/bootstrap-reboot.rtl.css.map differ
diff --git a/dist/css/bootstrap-utilities.css b/dist/css/bootstrap-utilities.css
index 7f3f5fdc8..8ce45f445 100644
--- a/dist/css/bootstrap-utilities.css
+++ b/dist/css/bootstrap-utilities.css
@@ -1130,6 +1130,10 @@
   padding-left: 3rem !important;
 }
 
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
+}
+
 .fs-1 {
   font-size: calc(1.375rem + 1.5vw) !important;
 }
@@ -1182,16 +1186,20 @@
   font-weight: bolder !important;
 }
 
-.text-lowercase {
-  text-transform: lowercase !important;
+.lh-1 {
+  line-height: 1 !important;
 }
 
-.text-uppercase {
-  text-transform: uppercase !important;
+.lh-sm {
+  line-height: 1.25 !important;
 }
 
-.text-capitalize {
-  text-transform: capitalize !important;
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
 }
 
 .text-start {
@@ -1206,6 +1214,45 @@
   text-align: center !important;
 }
 
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+/* rtl:end:remove */
 .text-primary {
   color: #0d6efd !important;
 }
@@ -1262,22 +1309,6 @@
   color: inherit !important;
 }
 
-.lh-1 {
-  line-height: 1 !important;
-}
-
-.lh-sm {
-  line-height: 1.25 !important;
-}
-
-.lh-base {
-  line-height: 1.5 !important;
-}
-
-.lh-lg {
-  line-height: 2 !important;
-}
-
 .bg-primary {
   background-color: #0d6efd !important;
 }
@@ -1326,37 +1357,6 @@
   background-image: var(--bs-gradient) !important;
 }
 
-.text-wrap {
-  white-space: normal !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-decoration-none {
-  text-decoration: none !important;
-}
-
-.text-decoration-underline {
-  text-decoration: underline !important;
-}
-
-.text-decoration-line-through {
-  text-decoration: line-through !important;
-}
-
-/* rtl:begin:remove */
-.text-break {
-  word-wrap: break-word !important;
-  word-break: break-word !important;
-}
-
-/* rtl:end:remove */
-.font-monospace {
-  font-family: var(--bs-font-monospace) !important;
-}
-
 .user-select-all {
   -webkit-user-select: all !important;
   -moz-user-select: all !important;
diff --git a/dist/css/bootstrap-utilities.css.map b/dist/css/bootstrap-utilities.css.map
index c689d94a8..9f3c5d32d 100644
Binary files a/dist/css/bootstrap-utilities.css.map and b/dist/css/bootstrap-utilities.css.map differ
diff --git a/dist/css/bootstrap-utilities.rtl.css b/dist/css/bootstrap-utilities.rtl.css
index 4be32e2b3..c8e17ce18 100644
--- a/dist/css/bootstrap-utilities.rtl.css
+++ b/dist/css/bootstrap-utilities.rtl.css
@@ -1130,6 +1130,10 @@
   padding-right: 3rem !important;
 }
 
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
+}
+
 .fs-1 {
   font-size: calc(1.375rem + 1.5vw) !important;
 }
@@ -1182,16 +1186,20 @@
   font-weight: bolder !important;
 }
 
-.text-lowercase {
-  text-transform: lowercase !important;
+.lh-1 {
+  line-height: 1 !important;
 }
 
-.text-uppercase {
-  text-transform: uppercase !important;
+.lh-sm {
+  line-height: 1.25 !important;
 }
 
-.text-capitalize {
-  text-transform: capitalize !important;
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
 }
 
 .text-start {
@@ -1206,6 +1214,37 @@
   text-align: center !important;
 }
 
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
 .text-primary {
   color: #0d6efd !important;
 }
@@ -1262,22 +1301,6 @@
   color: inherit !important;
 }
 
-.lh-1 {
-  line-height: 1 !important;
-}
-
-.lh-sm {
-  line-height: 1.25 !important;
-}
-
-.lh-base {
-  line-height: 1.5 !important;
-}
-
-.lh-lg {
-  line-height: 2 !important;
-}
-
 .bg-primary {
   background-color: #0d6efd !important;
 }
@@ -1326,29 +1349,6 @@
   background-image: var(--bs-gradient) !important;
 }
 
-.text-wrap {
-  white-space: normal !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-decoration-none {
-  text-decoration: none !important;
-}
-
-.text-decoration-underline {
-  text-decoration: underline !important;
-}
-
-.text-decoration-line-through {
-  text-decoration: line-through !important;
-}
-.font-monospace {
-  font-family: var(--bs-font-monospace) !important;
-}
-
 .user-select-all {
   -webkit-user-select: all !important;
   -moz-user-select: all !important;
diff --git a/dist/css/bootstrap-utilities.rtl.css.map b/dist/css/bootstrap-utilities.rtl.css.map
index bcfc6941c..16b4826be 100644
Binary files a/dist/css/bootstrap-utilities.rtl.css.map and b/dist/css/bootstrap-utilities.rtl.css.map differ
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 54ce4d828..011df80d9 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -7098,6 +7098,10 @@ textarea.form-control-lg {
   padding-left: 3rem !important;
 }
 
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
+}
+
 .fs-1 {
   font-size: calc(1.375rem + 1.5vw) !important;
 }
@@ -7150,16 +7154,20 @@ textarea.form-control-lg {
   font-weight: bolder !important;
 }
 
-.text-lowercase {
-  text-transform: lowercase !important;
+.lh-1 {
+  line-height: 1 !important;
 }
 
-.text-uppercase {
-  text-transform: uppercase !important;
+.lh-sm {
+  line-height: 1.25 !important;
 }
 
-.text-capitalize {
-  text-transform: capitalize !important;
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
 }
 
 .text-start {
@@ -7174,6 +7182,45 @@ textarea.form-control-lg {
   text-align: center !important;
 }
 
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+/* rtl:end:remove */
 .text-primary {
   color: #0d6efd !important;
 }
@@ -7230,22 +7277,6 @@ textarea.form-control-lg {
   color: inherit !important;
 }
 
-.lh-1 {
-  line-height: 1 !important;
-}
-
-.lh-sm {
-  line-height: 1.25 !important;
-}
-
-.lh-base {
-  line-height: 1.5 !important;
-}
-
-.lh-lg {
-  line-height: 2 !important;
-}
-
 .bg-primary {
   background-color: #0d6efd !important;
 }
@@ -7294,37 +7325,6 @@ textarea.form-control-lg {
   background-image: var(--bs-gradient) !important;
 }
 
-.text-wrap {
-  white-space: normal !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-decoration-none {
-  text-decoration: none !important;
-}
-
-.text-decoration-underline {
-  text-decoration: underline !important;
-}
-
-.text-decoration-line-through {
-  text-decoration: line-through !important;
-}
-
-/* rtl:begin:remove */
-.text-break {
-  word-wrap: break-word !important;
-  word-break: break-word !important;
-}
-
-/* rtl:end:remove */
-.font-monospace {
-  font-family: var(--bs-font-monospace) !important;
-}
-
 .user-select-all {
   -webkit-user-select: all !important;
   -moz-user-select: all !important;
diff --git a/dist/css/bootstrap.css.map b/dist/css/bootstrap.css.map
index a48544218..d69a05abe 100644
Binary files a/dist/css/bootstrap.css.map and b/dist/css/bootstrap.css.map differ
diff --git a/dist/css/bootstrap.rtl.css b/dist/css/bootstrap.rtl.css
index f30e3351f..14b0929bf 100644
--- a/dist/css/bootstrap.rtl.css
+++ b/dist/css/bootstrap.rtl.css
@@ -7083,6 +7083,10 @@ textarea.form-control-lg {
   padding-right: 3rem !important;
 }
 
+.font-monospace {
+  font-family: var(--bs-font-monospace) !important;
+}
+
 .fs-1 {
   font-size: calc(1.375rem + 1.5vw) !important;
 }
@@ -7135,16 +7139,20 @@ textarea.form-control-lg {
   font-weight: bolder !important;
 }
 
-.text-lowercase {
-  text-transform: lowercase !important;
+.lh-1 {
+  line-height: 1 !important;
 }
 
-.text-uppercase {
-  text-transform: uppercase !important;
+.lh-sm {
+  line-height: 1.25 !important;
 }
 
-.text-capitalize {
-  text-transform: capitalize !important;
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
 }
 
 .text-start {
@@ -7159,6 +7167,37 @@ textarea.form-control-lg {
   text-align: center !important;
 }
 
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
 .text-primary {
   color: #0d6efd !important;
 }
@@ -7215,22 +7254,6 @@ textarea.form-control-lg {
   color: inherit !important;
 }
 
-.lh-1 {
-  line-height: 1 !important;
-}
-
-.lh-sm {
-  line-height: 1.25 !important;
-}
-
-.lh-base {
-  line-height: 1.5 !important;
-}
-
-.lh-lg {
-  line-height: 2 !important;
-}
-
 .bg-primary {
   background-color: #0d6efd !important;
 }
@@ -7279,29 +7302,6 @@ textarea.form-control-lg {
   background-image: var(--bs-gradient) !important;
 }
 
-.text-wrap {
-  white-space: normal !important;
-}
-
-.text-nowrap {
-  white-space: nowrap !important;
-}
-
-.text-decoration-none {
-  text-decoration: none !important;
-}
-
-.text-decoration-underline {
-  text-decoration: underline !important;
-}
-
-.text-decoration-line-through {
-  text-decoration: line-through !important;
-}
-.font-monospace {
-  font-family: var(--bs-font-monospace) !important;
-}
-
 .user-select-all {
   -webkit-user-select: all !important;
   -moz-user-select: all !important;
diff --git a/dist/css/bootstrap.rtl.css.map b/dist/css/bootstrap.rtl.css.map
index 014a43751..c9499f574 100644
Binary files a/dist/css/bootstrap.rtl.css.map and b/dist/css/bootstrap.rtl.css.map differ
diff --git a/dist/js/bootstrap.bundle.js b/dist/js/bootstrap.bundle.js
index 1678cd21a..0545d4f3e 100644
--- a/dist/js/bootstrap.bundle.js
+++ b/dist/js/bootstrap.bundle.js
@@ -46,17 +46,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
@@ -766,8 +756,8 @@
 
     _createClass(Alert, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY;
       }
     }]);
@@ -842,8 +832,8 @@
 
     _createClass(Button, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY$1;
       }
     }]);
@@ -5882,8 +5872,8 @@
 
     _createClass(Popover, null, [{
       key: "Default",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return Default$5;
       }
     }, {
@@ -6383,8 +6373,8 @@
 
     _createClass(Tab, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY$9;
       }
     }]);
diff --git a/dist/js/bootstrap.bundle.js.map b/dist/js/bootstrap.bundle.js.map
index 0fb1570bd..268c1a658 100644
Binary files a/dist/js/bootstrap.bundle.js.map and b/dist/js/bootstrap.bundle.js.map differ
diff --git a/dist/js/bootstrap.esm.js b/dist/js/bootstrap.esm.js
index 638fee1f8..c0cd509df 100644
--- a/dist/js/bootstrap.esm.js
+++ b/dist/js/bootstrap.esm.js
@@ -43,17 +43,7 @@ function _extends() {
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
+  subClass.__proto__ = superClass;
 }
 
 /**
@@ -763,8 +753,8 @@ var Alert = /*#__PURE__*/function (_BaseComponent) {
 
   _createClass(Alert, null, [{
     key: "DATA_KEY",
-    get: // Getters
-    function get() {
+    // Getters
+    get: function get() {
       return DATA_KEY;
     }
   }]);
@@ -839,8 +829,8 @@ var Button = /*#__PURE__*/function (_BaseComponent) {
 
   _createClass(Button, null, [{
     key: "DATA_KEY",
-    get: // Getters
-    function get() {
+    // Getters
+    get: function get() {
       return DATA_KEY$1;
     }
   }]);
@@ -4158,8 +4148,8 @@ var Popover = /*#__PURE__*/function (_Tooltip) {
 
   _createClass(Popover, null, [{
     key: "Default",
-    get: // Getters
-    function get() {
+    // Getters
+    get: function get() {
       return Default$5;
     }
   }, {
@@ -4659,8 +4649,8 @@ var Tab = /*#__PURE__*/function (_BaseComponent) {
 
   _createClass(Tab, null, [{
     key: "DATA_KEY",
-    get: // Getters
-    function get() {
+    // Getters
+    get: function get() {
       return DATA_KEY$9;
     }
   }]);
diff --git a/dist/js/bootstrap.esm.js.map b/dist/js/bootstrap.esm.js.map
index af58768cf..400ad62fb 100644
Binary files a/dist/js/bootstrap.esm.js.map and b/dist/js/bootstrap.esm.js.map differ
diff --git a/dist/js/bootstrap.js b/dist/js/bootstrap.js
index 94d0ae344..cfb6c335b 100644
--- a/dist/js/bootstrap.js
+++ b/dist/js/bootstrap.js
@@ -68,17 +68,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
@@ -788,8 +778,8 @@
 
     _createClass(Alert, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY;
       }
     }]);
@@ -864,8 +854,8 @@
 
     _createClass(Button, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY$1;
       }
     }]);
@@ -4183,8 +4173,8 @@
 
     _createClass(Popover, null, [{
       key: "Default",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return Default$5;
       }
     }, {
@@ -4684,8 +4674,8 @@
 
     _createClass(Tab, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY$9;
       }
     }]);
diff --git a/dist/js/bootstrap.js.map b/dist/js/bootstrap.js.map
index d667e1399..660945cb3 100644
Binary files a/dist/js/bootstrap.js.map and b/dist/js/bootstrap.js.map differ
diff --git a/js/dist/alert.js b/js/dist/alert.js
index 6bcde2615..2e4f2a088 100644
--- a/js/dist/alert.js
+++ b/js/dist/alert.js
@@ -34,17 +34,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
@@ -276,8 +266,8 @@
 
     _createClass(Alert, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY;
       }
     }]);
diff --git a/js/dist/alert.js.map b/js/dist/alert.js.map
index 6ef85dc0e..69e1a242e 100644
Binary files a/js/dist/alert.js.map and b/js/dist/alert.js.map differ
diff --git a/js/dist/base-component.js.map b/js/dist/base-component.js.map
index 7b46dfb39..0779b6d72 100644
Binary files a/js/dist/base-component.js.map and b/js/dist/base-component.js.map differ
diff --git a/js/dist/button.js b/js/dist/button.js
index 7e6b55a60..4139b4bd3 100644
--- a/js/dist/button.js
+++ b/js/dist/button.js
@@ -34,17 +34,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
@@ -144,8 +134,8 @@
 
     _createClass(Button, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY;
       }
     }]);
diff --git a/js/dist/button.js.map b/js/dist/button.js.map
index 97a9b2783..2176c6313 100644
Binary files a/js/dist/button.js.map and b/js/dist/button.js.map differ
diff --git a/js/dist/carousel.js b/js/dist/carousel.js
index ac6e8455b..986de8e0c 100644
--- a/js/dist/carousel.js
+++ b/js/dist/carousel.js
@@ -54,17 +54,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
diff --git a/js/dist/carousel.js.map b/js/dist/carousel.js.map
index c681d9303..700fdeb60 100644
Binary files a/js/dist/carousel.js.map and b/js/dist/carousel.js.map differ
diff --git a/js/dist/collapse.js b/js/dist/collapse.js
index 29f47f900..af9406fc6 100644
--- a/js/dist/collapse.js
+++ b/js/dist/collapse.js
@@ -54,17 +54,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
diff --git a/js/dist/collapse.js.map b/js/dist/collapse.js.map
index 4d51ead57..f592fbdbe 100644
Binary files a/js/dist/collapse.js.map and b/js/dist/collapse.js.map differ
diff --git a/js/dist/dropdown.js b/js/dist/dropdown.js
index 07cb3fc3d..1f8c98b7d 100644
--- a/js/dist/dropdown.js
+++ b/js/dist/dropdown.js
@@ -75,17 +75,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
diff --git a/js/dist/dropdown.js.map b/js/dist/dropdown.js.map
index 69c82d4ac..dcfc13ba2 100644
Binary files a/js/dist/dropdown.js.map and b/js/dist/dropdown.js.map differ
diff --git a/js/dist/modal.js b/js/dist/modal.js
index 6f34c2b1c..035bc96fe 100644
--- a/js/dist/modal.js
+++ b/js/dist/modal.js
@@ -54,17 +54,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
diff --git a/js/dist/modal.js.map b/js/dist/modal.js.map
index 7401feb86..e68350a6e 100644
Binary files a/js/dist/modal.js.map and b/js/dist/modal.js.map differ
diff --git a/js/dist/popover.js b/js/dist/popover.js
index dda521d5e..3fc73ce92 100644
--- a/js/dist/popover.js
+++ b/js/dist/popover.js
@@ -52,17 +52,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
@@ -236,8 +226,8 @@
 
     _createClass(Popover, null, [{
       key: "Default",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return Default;
       }
     }, {
diff --git a/js/dist/popover.js.map b/js/dist/popover.js.map
index 1894cb043..32916725a 100644
Binary files a/js/dist/popover.js.map and b/js/dist/popover.js.map differ
diff --git a/js/dist/scrollspy.js b/js/dist/scrollspy.js
index 1ada6331e..9f31c23e6 100644
--- a/js/dist/scrollspy.js
+++ b/js/dist/scrollspy.js
@@ -54,17 +54,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
diff --git a/js/dist/scrollspy.js.map b/js/dist/scrollspy.js.map
index 089972a5e..484d97e0a 100644
Binary files a/js/dist/scrollspy.js.map and b/js/dist/scrollspy.js.map differ
diff --git a/js/dist/tab.js b/js/dist/tab.js
index b1188075c..232eb73cb 100644
--- a/js/dist/tab.js
+++ b/js/dist/tab.js
@@ -35,17 +35,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
@@ -346,8 +336,8 @@
 
     _createClass(Tab, null, [{
       key: "DATA_KEY",
-      get: // Getters
-      function get() {
+      // Getters
+      get: function get() {
         return DATA_KEY;
       }
     }]);
diff --git a/js/dist/tab.js.map b/js/dist/tab.js.map
index 5334c0e4c..ed4b8856f 100644
Binary files a/js/dist/tab.js.map and b/js/dist/tab.js.map differ
diff --git a/js/dist/toast.js b/js/dist/toast.js
index 6fb0ebd2a..69de06275 100644
--- a/js/dist/toast.js
+++ b/js/dist/toast.js
@@ -53,17 +53,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
diff --git a/js/dist/toast.js.map b/js/dist/toast.js.map
index 5eecedcd5..9538517ae 100644
Binary files a/js/dist/toast.js.map and b/js/dist/toast.js.map differ
diff --git a/js/dist/tooltip.js b/js/dist/tooltip.js
index 19f7784fa..b030b3cac 100644
--- a/js/dist/tooltip.js
+++ b/js/dist/tooltip.js
@@ -75,17 +75,7 @@
   function _inheritsLoose(subClass, superClass) {
     subClass.prototype = Object.create(superClass.prototype);
     subClass.prototype.constructor = subClass;
-
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+    subClass.__proto__ = superClass;
   }
 
   /**
diff --git a/js/dist/tooltip.js.map b/js/dist/tooltip.js.map
index f4cedb664..f9cf9f172 100644
Binary files a/js/dist/tooltip.js.map and b/js/dist/tooltip.js.map differ
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 8f28d0277..ee4287c92 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -55,6 +55,7 @@
 // Alternate buttons
 //
 
+// scss-docs-start btn-variant-loops
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
@@ -66,6 +67,7 @@
     @include button-outline-variant($value);
   }
 }
+// scss-docs-end btn-variant-loops
 
 
 //
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 06ab5644d..6dd4dd329 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -202,6 +202,7 @@
   .modal-xl { max-width: $modal-xl; }
 }
 
+// scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map-keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
   $postfix: if($infix != "", $infix + "-down", "");
@@ -233,3 +234,4 @@
     }
   }
 }
+// scss-docs-end modal-fullscreen-loop
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 21126b4ed..2ccef11b7 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -154,6 +154,7 @@
   overflow-y: auto;
 }
 
+// scss-docs-start navbar-expand-loop
 // Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
 .navbar-expand {
@@ -196,6 +197,7 @@
     }
   }
 }
+// scss-docs-end navbar-expand-loop
 
 
 // Navbar themes
diff --git a/scss/_progress.scss b/scss/_progress.scss
index b48ffc4b8..5715ab00c 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,9 +1,12 @@
 // Disable animation if transitions are disabled
+
+// scss-docs-start progress-keyframes
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     0% { background-position-x: $progress-height; }
   }
 }
+// scss-docs-end progress-keyframes
 
 .progress {
   display: flex;
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 7444ed1d1..8e19bae51 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -2,9 +2,11 @@
 // Rotating border
 //
 
+// scss-docs-start spinner-border-keyframes
 @keyframes spinner-border {
   to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
 }
+// scss-docs-end spinner-border-keyframes
 
 .spinner-border {
   display: inline-block;
@@ -28,6 +30,7 @@
 // Growing circle
 //
 
+// scss-docs-start spinner-grow-keyframes
 @keyframes spinner-grow {
   0% {
     transform: scale(0);
@@ -37,6 +40,7 @@
     transform: none;
   }
 }
+// scss-docs-end spinner-grow-keyframes
 
 .spinner-grow {
   display: inline-block;
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 3d1db3e9d..2905df45c 100644
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -6,6 +6,7 @@
   }
 }
 
+// scss-docs-start collapse-classes
 .collapse {
   &:not(.show) {
     display: none;
@@ -17,3 +18,4 @@
   overflow: hidden;
   @include transition($transition-collapse);
 }
+// scss-docs-end collapse-classes
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 82f3db114..3c927cf59 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,14 +1,19 @@
+// stylelint-disable indentation
+
 // Utilities
 
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map-merge(
   (
+    // scss-docs-start utils-vertical-align
     "align": (
       property: vertical-align,
       class: align,
       values: baseline top middle bottom text-bottom text-top
     ),
+    // scss-docs-end utils-vertical-align
+    // scss-docs-start utils-float
     "float": (
       responsive: true,
       property: float,
@@ -18,10 +23,13 @@ $utilities: map-merge(
         none: none,
       )
     ),
+    // scss-docs-end utils-float
+    // scss-docs-start utils-overflow
     "overflow": (
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
       responsive: true,
@@ -31,6 +39,7 @@ $utilities: map-merge(
       values: inline inline-block block grid table table-row table-cell flex inline-flex none
     ),
     // scss-docs-end utils-display
+    // scss-docs-start utils-shadow
     "shadow": (
       property: box-shadow,
       class: shadow,
@@ -41,6 +50,8 @@ $utilities: map-merge(
         none: none,
       )
     ),
+    // scss-docs-end utils-shadow
+    // scss-docs-start utils-position
     "position": (
       property: position,
       values: static relative absolute fixed sticky
@@ -72,6 +83,8 @@ $utilities: map-merge(
         y: translateY(-50%),
       )
     ),
+    // scss-docs-end utils-position
+    // scss-docs-start utils-borders
     "border": (
       property: border,
       values: (
@@ -119,7 +132,9 @@ $utilities: map-merge(
       class: border,
       values: $border-widths
     ),
+    // scss-docs-end utils-borders
     // Sizing utilities
+    // scss-docs-start utils-sizing
     "width": (
       property: width,
       class: w,
@@ -172,7 +187,9 @@ $utilities: map-merge(
       class: min-vh,
       values: (100: 100vh)
     ),
+    // scss-docs-end utils-sizing
     // Flex utilities
+    // scss-docs-start utils-flex
     "flex": (
       responsive: true,
       property: flex,
@@ -275,7 +292,9 @@ $utilities: map-merge(
         last: 6,
       ),
     ),
+    // scss-docs-end utils-flex
     // Margin utilities
+    // scss-docs-start utils-spacing
     "margin": (
       responsive: true,
       property: margin,
@@ -404,7 +423,14 @@ $utilities: map-merge(
       class: ps,
       values: $spacers
     ),
+    // scss-docs-end utils-spacing
     // Text
+    // scss-docs-start utils-text
+    "font-family": (
+      property: font-family,
+      class: font,
+      values: (monospace: var(--#{$variable-prefix}font-monospace))
+    ),
     "font-size": (
       rfs: true,
       property: font-size,
@@ -427,10 +453,15 @@ $utilities: map-merge(
         bolder: $font-weight-bolder
       )
     ),
-    "text-transform": (
-      property: text-transform,
-      class: text,
-      values: lowercase uppercase capitalize
+    "line-height": (
+      property: line-height,
+      class: lh,
+      values: (
+        1: 1,
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      )
     ),
     "text-align": (
       responsive: true,
@@ -442,6 +473,30 @@ $utilities: map-merge(
         center: center,
       )
     ),
+    "text-decoration": (
+      property: text-decoration,
+      values: none underline line-through
+    ),
+    "text-transform": (
+      property: text-transform,
+      class: text,
+      values: lowercase uppercase capitalize
+    ),
+    "white-space": (
+      property: white-space,
+      class: text,
+      values: (
+        wrap: normal,
+        nowrap: nowrap,
+      )
+    ),
+    "word-wrap": (
+      property: word-wrap word-break,
+      class: text,
+      values: (break: break-word),
+      rtl: false
+    ),
+    // scss-docs-end utils-text
     // scss-docs-start utils-color
     "color": (
       property: color,
@@ -459,16 +514,6 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-color
-    "line-height": (
-      property: line-height,
-      class: lh,
-      values: (
-        1: 1,
-        sm: $line-height-sm,
-        base: $line-height-base,
-        lg: $line-height-lg,
-      )
-    ),
     // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
@@ -488,29 +533,7 @@ $utilities: map-merge(
       class: bg,
       values: (gradient: var(--#{$variable-prefix}gradient))
     ),
-    "white-space": (
-      property: white-space,
-      class: text,
-      values: (
-        wrap: normal,
-        nowrap: nowrap,
-      )
-    ),
-    "text-decoration": (
-      property: text-decoration,
-      values: none underline line-through
-    ),
-    "word-wrap": (
-      property: word-wrap word-break,
-      class: text,
-      values: (break: break-word),
-      rtl: false
-    ),
-    "font-family": (
-      property: font-family,
-      class: font,
-      values: (monospace: var(--#{$variable-prefix}font-monospace))
-    ),
+    // scss-docs-start utils-interaction
     "user-select": (
       property: user-select,
       values: all auto none
@@ -520,6 +543,8 @@ $utilities: map-merge(
       class: pe,
       values: none auto,
     ),
+    // scss-docs-end utils-interaction
+    // scss-docs-start utils-border-radius
     "rounded": (
       property: border-radius,
       class: rounded,
@@ -553,6 +578,8 @@ $utilities: map-merge(
       class: rounded-start,
       values: (null: $border-radius)
     ),
+    // scss-docs-end utils-border-radius
+    // scss-docs-start utils-visibility
     "visibility": (
       property: visibility,
       class: null,
@@ -561,6 +588,7 @@ $utilities: map-merge(
         invisible: hidden,
       )
     )
+    // scss-docs-end utils-visibility
   ),
   $utilities
 );
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3f8014497..a48ab92c8 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -246,6 +246,7 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
+// scss-docs-start spacer-variables-maps
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
@@ -257,17 +258,19 @@ $spacers: (
 ) !default;
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+// scss-docs-end spacer-variables-maps
 
 // Position
 //
 // Define the edge positioning anchors of the position utilities.
 
+// scss-docs-start position-map
 $position-values: (
   0: 0,
   50: 50%,
   100: 100%
 ) !default;
-
+// scss-docs-end position-map
 
 // Body
 //
@@ -354,6 +357,7 @@ $container-padding-x: $grid-gutter-width / 2 !default;
 //
 // Define common padding and border radius sizes and more.
 
+// scss-docs-start border-variables
 $border-width:                1px !default;
 $border-widths: (
   0: 0,
@@ -365,27 +369,36 @@ $border-widths: (
 ) !default;
 
 $border-color:                $gray-300 !default;
+// scss-docs-end border-variables
 
+// scss-docs-start border-radius-variables
 $border-radius:               .25rem !default;
 $border-radius-sm:            .2rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-pill:          50rem !default;
+// scss-docs-end border-radius-variables
 
+// scss-docs-start box-shadow-variables
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
 $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
 $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
 $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
+// scss-docs-end box-shadow-variables
 
 $component-active-color:      $white !default;
 $component-active-bg:         $primary !default;
 
+// scss-docs-start caret-variables
 $caret-width:                 .3em !default;
 $caret-vertical-align:        $caret-width * .85 !default;
 $caret-spacing:               $caret-width * .85 !default;
+// scss-docs-end caret-variables
 
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
+// scss-docs-start collapse-transition
 $transition-collapse:         height .35s ease !default;
+// scss-docs-end collapse-transition
 
 // stylelint-disable function-disallowed-list
 // scss-docs-start aspect-ratios
@@ -402,6 +415,7 @@ $aspect-ratios: (
 //
 // Font, line-height, and color for body text, headings, and more.
 
+// scss-docs-start font-variables
 // stylelint-disable value-keyword-case
 $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
@@ -434,6 +448,7 @@ $h3-font-size:                $font-size-base * 1.75 !default;
 $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
+// scss-docs-end font-variables
 
 // scss-docs-start font-sizes
 $font-sizes: (
@@ -446,12 +461,14 @@ $font-sizes: (
 ) !default;
 // scss-docs-end font-sizes
 
+// scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer / 2 !default;
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
 $headings-color:              null !default;
+// scss-docs-end headings-variables
 
 // scss-docs-start display-headings
 $display-font-sizes: (
@@ -467,6 +484,7 @@ $display-font-weight: 300 !default;
 $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
 
+// scss-docs-start type-variables
 $lead-font-size:              $font-size-base * 1.25 !default;
 $lead-font-weight:            300 !default;
 
@@ -501,6 +519,7 @@ $nested-kbd-font-weight:      $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-bg:                     #fcf8e3 !default;
+// scss-docs-end type-variables
 
 
 // Tables
@@ -543,7 +562,9 @@ $table-group-separator-color: currentColor !default;
 $table-caption-color:         $text-muted !default;
 
 $table-bg-scale:              -80% !default;
+// scss-docs-end table-variables
 
+// scss-docs-start table-loop
 $table-variants: (
   "primary":    shift-color($primary, $table-bg-scale),
   "secondary":  shift-color($secondary, $table-bg-scale),
@@ -554,13 +575,14 @@ $table-variants: (
   "light":      $light,
   "dark":       $dark,
 ) !default;
-// scss-docs-end table-variables
+// scss-docs-end table-loop
 
 
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
+// scss-docs-start input-btn-variables
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
 $input-btn-font-family:       null !default;
@@ -581,12 +603,14 @@ $input-btn-padding-x-lg:      1rem !default;
 $input-btn-font-size-lg:      $font-size-lg !default;
 
 $input-btn-border-width:      $border-width !default;
+// scss-docs-end input-btn-variables
 
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
+// scss-docs-start btn-variables
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -630,22 +654,28 @@ $btn-active-bg-shade-amount:      20% !default;
 $btn-active-bg-tint-amount:       20% !default;
 $btn-active-border-shade-amount:  25% !default;
 $btn-active-border-tint-amount:   10% !default;
+// scss-docs-end btn-variables
 
 
 // Forms
 
+// scss-docs-start form-text-variables
 $form-text-margin-top:                  .25rem !default;
 $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 null !default;
 $form-text-color:                       $text-muted !default;
+// scss-docs-end form-text-variables
 
+// scss-docs-start form-label-variables
 $form-label-margin-bottom:              .5rem !default;
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
 $form-label-font-weight:                null !default;
 $form-label-color:                      null !default;
+// scss-docs-end form-label-variables
 
+// scss-docs-start form-input-variables
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;
 $input-font-family:                     $input-btn-font-family !default;
@@ -694,8 +724,9 @@ $input-height-sm:                       add($input-line-height * 1em, add($input
 $input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end form-input-variables
 
-
+// scss-docs-start form-check-variables
 $form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 $form-check-padding-start:                $form-check-input-width + .5em !default;
@@ -728,6 +759,10 @@ $form-check-input-disabled-opacity:        .5 !default;
 $form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
 $form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;
 
+$form-check-inline-margin-end:    1rem !default;
+// scss-docs-end form-check-variables
+
+// scss-docs-start form-switch-variables
 $form-switch-color:               rgba(0, 0, 0, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
@@ -741,16 +776,18 @@ $form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www
 $form-switch-checked-color:       $component-active-color !default;
 $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
+// scss-docs-end form-switch-variables
 
-$form-check-inline-margin-end:    1rem !default;
-
+// scss-docs-start input-group-variables
 $input-group-addon-padding-y:           $input-padding-y !default;
 $input-group-addon-padding-x:           $input-padding-x !default;
 $input-group-addon-font-weight:         $input-font-weight !default;
 $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
+// scss-docs-end input-group-variables
 
+// scss-docs-start form-select-variables
 $form-select-padding-y:             $input-padding-y !default;
 $form-select-padding-x:             $input-padding-x !default;
 $form-select-font-family:           $input-font-family !default;
@@ -788,7 +825,9 @@ $form-select-font-size-sm:        $input-font-size-sm !default;
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
+// scss-docs-end form-select-variables
 
+// scss-docs-start form-range-variables
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
@@ -807,11 +846,15 @@ $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For f
 $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
 $form-range-thumb-disabled-bg:             $gray-500 !default;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+// scss-docs-end form-range-variables
 
+// scss-docs-start form-file-variables
 $form-file-button-color:          $input-color !default;
 $form-file-button-bg:             $input-group-addon-bg !default;
 $form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
+// scss-docs-end form-file-variables
 
+// scss-docs-start form-floating-variables
 $form-floating-height:            add(3.5rem, $input-height-border) !default;
 $form-floating-padding-x:         $input-padding-x !default;
 $form-floating-padding-y:         1rem !default;
@@ -820,9 +863,11 @@ $form-floating-input-padding-b:   .625rem !default;
 $form-floating-label-opacity:     .65 !default;
 $form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
 $form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
+// scss-docs-end form-floating-variables
 
 // Form validation
 
+// scss-docs-start form-feedback-variables
 $form-feedback-margin-top:          $form-text-margin-top !default;
 $form-feedback-font-size:           $form-text-font-size !default;
 $form-feedback-font-style:          $form-text-font-style !default;
@@ -833,6 +878,7 @@ $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
 $form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+// scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-states
 $form-validation-states: (
@@ -865,6 +911,7 @@ $zindex-tooltip:                    1070 !default;
 
 // Navs
 
+// scss-docs-start nav-variables
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
 $nav-link-font-size:                null !default;
@@ -885,10 +932,12 @@ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg
 $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
+// scss-docs-end nav-variables
 
 
 // Navbar
 
+// scss-docs-start navbar-variables
 $navbar-padding-y:                  $spacer / 2 !default;
 $navbar-padding-x:                  null !default;
 
@@ -907,7 +956,9 @@ $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
+// scss-docs-end navbar-variables
 
+// scss-docs-start navbar-theme-variables
 $navbar-dark-color:                 rgba($white, .55) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
@@ -926,12 +977,14 @@ $navbar-light-brand-color:                $navbar-light-active-color !default;
 $navbar-light-brand-hover-color:          $navbar-light-active-color !default;
 $navbar-dark-brand-color:                 $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+// scss-docs-end navbar-theme-variables
 
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
+// scss-docs-start dropdown-variables
 $dropdown-min-width:                10rem !default;
 $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
@@ -961,7 +1014,9 @@ $dropdown-item-padding-x:           $spacer !default;
 
 $dropdown-header-color:             $gray-600 !default;
 $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+// scss-docs-end dropdown-variables
 
+// scss-docs-start dropdown-dark-variables
 $dropdown-dark-color:               $gray-300 !default;
 $dropdown-dark-bg:                  $gray-800 !default;
 $dropdown-dark-border-color:        $dropdown-border-color !default;
@@ -974,10 +1029,12 @@ $dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
 $dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
 $dropdown-dark-link-disabled-color: $gray-500 !default;
 $dropdown-dark-header-color:        $gray-500 !default;
+// scss-docs-end dropdown-dark-variables
 
 
 // Pagination
 
+// scss-docs-start pagination-variables
 $pagination-padding-y:              .375rem !default;
 $pagination-padding-x:              .75rem !default;
 $pagination-padding-y-sm:           .25rem !default;
@@ -1013,9 +1070,12 @@ $pagination-transition:              color .15s ease-in-out, background-color .1
 
 $pagination-border-radius-sm:       $border-radius-sm !default;
 $pagination-border-radius-lg:       $border-radius-lg !default;
+// scss-docs-end pagination-variables
+
 
 // Cards
 
+// scss-docs-start card-variables
 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer / 2 !default;
@@ -1030,12 +1090,13 @@ $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;
 $card-bg:                           $white !default;
-
 $card-img-overlay-padding:          $spacer !default;
-
 $card-group-margin:                 $grid-gutter-width / 2 !default;
+// scss-docs-end card-variables
 
 // Accordion
+
+// scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
 $accordion-color:                         $body-color !default;
@@ -1066,9 +1127,11 @@ $accordion-icon-transform:                rotate(180deg) !default;
 
 $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
 $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+// scss-docs-end accordion-variables
 
 // Tooltips
 
+// scss-docs-start tooltip-variables
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     $white !default;
@@ -1082,18 +1145,22 @@ $tooltip-margin:                    0 !default;
 $tooltip-arrow-width:               .8rem !default;
 $tooltip-arrow-height:              .4rem !default;
 $tooltip-arrow-color:               $tooltip-bg !default;
+// scss-docs-end tooltip-variables
 
 // Form tooltips must come after regular tooltips
+// scss-docs-start tooltip-feedback-variables
 $form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
 $form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
 $form-feedback-tooltip-font-size:     $tooltip-font-size !default;
 $form-feedback-tooltip-line-height:   null !default;
 $form-feedback-tooltip-opacity:       $tooltip-opacity !default;
 $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+// scss-docs-start tooltip-feedback-variables
 
 
 // Popovers
 
+// scss-docs-start popover-variables
 $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
@@ -1117,10 +1184,12 @@ $popover-arrow-height:              .5rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+// scss-docs-end popover-variables
 
 
 // Toasts
 
+// scss-docs-start toast-variables
 $toast-max-width:                   350px !default;
 $toast-padding-x:                   .75rem !default;
 $toast-padding-y:                   .5rem !default;
@@ -1136,24 +1205,26 @@ $toast-spacing:                     $container-padding-x !default;
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;
 $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+// scss-docs-end toast-variables
 
 
 // Badges
 
+// scss-docs-start badge-variables
 $badge-font-size:                   .75em !default;
 $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .65em !default;
 $badge-border-radius:               $border-radius !default;
+// scss-docs-end badge-variables
 
 
 // Modals
 
-// Padding applied to the modal body
+// scss-docs-start modal-variables
 $modal-inner-padding:               $spacer !default;
 
-// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
 $modal-footer-margin-between:       .5rem !default;
 
 $modal-dialog-margin:               .5rem !default;
@@ -1189,28 +1260,30 @@ $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;
 $modal-scale-transform:             scale(1.02) !default;
+// scss-docs-end modal-variables
 
 
 // Alerts
 //
 // Define alert colors, border radius, and padding.
 
-$alert-padding-y:                   $spacer !default;
-$alert-padding-x:                   $spacer !default;
-$alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius !default;
-$alert-link-font-weight:            $font-weight-bold !default;
-$alert-border-width:                $border-width !default;
-
-$alert-bg-scale:                    -80% !default;
-$alert-border-scale:                -70% !default;
-$alert-color-scale:                 40% !default;
-
-$alert-dismissible-padding-r:       $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-start alert-variables
+$alert-padding-y:               $spacer !default;
+$alert-padding-x:               $spacer !default;
+$alert-margin-bottom:           1rem !default;
+$alert-border-radius:           $border-radius !default;
+$alert-link-font-weight:        $font-weight-bold !default;
+$alert-border-width:            $border-width !default;
+$alert-bg-scale:                -80% !default;
+$alert-border-scale:            -70% !default;
+$alert-color-scale:             40% !default;
+$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+// scss-docs-end alert-variables
 
 
 // Progress bars
 
+// scss-docs-start progress-variables
 $progress-height:                   1rem !default;
 $progress-font-size:                $font-size-base * .75 !default;
 $progress-bg:                       $gray-200 !default;
@@ -1220,10 +1293,12 @@ $progress-bar-color:                $white !default;
 $progress-bar-bg:                   $primary !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
+// scss-docs-end progress-variables
 
 
 // List group
 
+// scss-docs-start list-group-variables
 $list-group-color:                  null !default;
 $list-group-bg:                     $white !default;
 $list-group-border-color:           rgba($black, .125) !default;
@@ -1248,26 +1323,32 @@ $list-group-action-hover-color:     $list-group-action-color !default;
 
 $list-group-action-active-color:    $body-color !default;
 $list-group-action-active-bg:       $gray-200 !default;
+// scss-docs-end list-group-variables
 
 
 // Image thumbnails
 
+// scss-docs-start thumbnail-variables
 $thumbnail-padding:                 .25rem !default;
 $thumbnail-bg:                      $body-bg !default;
 $thumbnail-border-width:            $border-width !default;
 $thumbnail-border-color:            $gray-300 !default;
 $thumbnail-border-radius:           $border-radius !default;
 $thumbnail-box-shadow:              $box-shadow-sm !default;
+// scss-docs-end thumbnail-variables
 
 
 // Figures
 
+// scss-docs-start figure-variables
 $figure-caption-font-size:          $small-font-size !default;
 $figure-caption-color:              $gray-600 !default;
+// scss-docs-end figure-variables
 
 
 // Breadcrumbs
 
+// scss-docs-start breadcrumb-variables
 $breadcrumb-font-size:              null !default;
 $breadcrumb-padding-y:              0 !default;
 $breadcrumb-padding-x:              0 !default;
@@ -1279,9 +1360,11 @@ $breadcrumb-active-color:           $gray-600 !default;
 $breadcrumb-divider:                quote("/") !default;
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
+// scss-docs-end breadcrumb-variables
 
 // Carousel
 
+// scss-docs-start carousel-variables
 $carousel-control-color:             $white !default;
 $carousel-control-width:             15% !default;
 $carousel-control-opacity:           .5 !default;
@@ -1313,10 +1396,12 @@ $carousel-transition:                transform $carousel-transition-duration eas
 $carousel-dark-indicator-active-bg:  $black !default;
 $carousel-dark-caption-color:        $black !default;
 $carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+// scss-docs-end carousel-variables
 
 
 // Spinners
 
+// scss-docs-start spinner-variables
 $spinner-width:           2rem !default;
 $spinner-height:          $spinner-width !default;
 $spinner-border-width:    .25em !default;
@@ -1325,10 +1410,12 @@ $spinner-animation-speed: .75s !default;
 $spinner-width-sm:        1rem !default;
 $spinner-height-sm:       $spinner-width-sm !default;
 $spinner-border-width-sm: .2em !default;
+// scss-docs-end spinner-variables
 
 
 // Close
 
+// scss-docs-start close-variables
 $btn-close-width:            1em !default;
 $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
@@ -1341,6 +1428,8 @@ $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
 $btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+// scss-docs-end close-variables
+
 
 // Code
 
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index 99ebbc305..f3eb59511 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,3 +1,4 @@
+// scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border, $color) {
   color: $color;
   @include gradient-bg($background);
@@ -7,3 +8,4 @@
     color: shade-color($color, 20%);
   }
 }
+// scss-docs-end alert-variant-mixin
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 819b8abd4..616decbce 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -14,6 +14,7 @@
   @return $return;
 }
 
+// scss-docs-start border-radius-mixins
 @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: valid-radius($radius);
@@ -74,3 +75,4 @@
     border-bottom-left-radius: valid-radius($radius);
   }
 }
+// scss-docs-end border-radius-mixins
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 3fbd70896..c06fa4a98 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,6 +3,7 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
+// scss-docs-start btn-variant-mixin
 @mixin button-variant(
   $background,
   $border,
@@ -71,7 +72,9 @@
     border-color: $disabled-border;
   }
 }
+// scss-docs-end btn-variant-mixin
 
+// scss-docs-start btn-outline-variant-mixin
 @mixin button-outline-variant(
   $color,
   $color-hover: color-contrast($color),
@@ -118,11 +121,13 @@
     background-color: transparent;
   }
 }
+// scss-docs-end btn-outline-variant-mixin
 
-// Button sizes
+// scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   @include font-size($font-size);
   // Manually declare to provide an override to the browser default
   @include border-radius($border-radius, 0);
 }
+// scss-docs-end btn-size-mixin
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index fc1066914..4b0f0360b 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -1,3 +1,4 @@
+// scss-docs-start caret-mixins
 @mixin caret-down {
   border-top: $caret-width solid;
   border-right: $caret-width solid transparent;
@@ -60,3 +61,4 @@
     }
   }
 }
+// scss-docs-end caret-mixins
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 8be4d2ee9..9db92bb90 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,5 +1,7 @@
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+
+// scss-docs-start form-validation-mixins
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {
     .was-validated #{if(&, "&", "")}:#{$state},
@@ -122,3 +124,4 @@
     }
   }
 }
+// scss-docs-end form-validation-mixins
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 351e9109e..e55415f2b 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -1,5 +1,6 @@
 // List Groups
 
+// scss-docs-start list-group-mixin
 @mixin list-group-item-variant($state, $background, $color) {
   .list-group-item-#{$state} {
     color: $color;
@@ -20,3 +21,4 @@
     }
   }
 }
+// scss-docs-end list-group-mixin
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 9cb7fd8bc..3101b380d 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -1,5 +1,6 @@
 // Pagination
 
+// scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
   .page-link {
     padding: $padding-y $padding-x;
@@ -27,3 +28,4 @@
     }
   }
 }
+// scss-docs-end pagination-mixin
diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md
index 298b0697a..923d5a98b 100644
--- a/site/content/docs/5.0/components/accordion.md
+++ b/site/content/docs/5.0/components/accordion.md
@@ -104,3 +104,9 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a
 ## Accessibility
 
 Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md
index f35a044ae..3ef2e62cf 100644
--- a/site/content/docs/5.0/components/alerts.md
+++ b/site/content/docs/5.0/components/alerts.md
@@ -71,6 +71,24 @@ You can see this in action with a live demo:
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
 {{< /callout >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
+
+### Variant mixin
+
+Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
+
+{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
+
+### Loop
+
+Loop that generates the modifier classes with the `alert-variant()` mixin.
+
+{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
+
 ## JavaScript behavior
 
 ### Triggers
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 44c85d717..50571d885 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -63,3 +63,9 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 <span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/breadcrumb.md b/site/content/docs/5.0/components/breadcrumb.md
index 3395fbf67..9143e7612 100644
--- a/site/content/docs/5.0/components/breadcrumb.md
+++ b/site/content/docs/5.0/components/breadcrumb.md
@@ -88,3 +88,9 @@ $breadcrumb-divider: none;
 Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
 
 For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md
index b53263a88..063bae1c4 100644
--- a/site/content/docs/5.0/components/buttons.md
+++ b/site/content/docs/5.0/components/buttons.md
@@ -205,3 +205,25 @@ buttons.forEach(function (button) {
   button.toggle()
 })
 ```
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
+
+{{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
+
+{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
+
+{{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
+
+### Loops
+
+Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
+
+{{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}}
diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md
index 2db1a1f40..48f54f0c2 100644
--- a/site/content/docs/5.0/components/card.md
+++ b/site/content/docs/5.0/components/card.md
@@ -721,3 +721,9 @@ Just like with card groups, card footers will automatically line up.
 ### Masonry
 
 In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="card-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md
index 689e7a6aa..a73ebb090 100644
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@@ -279,6 +279,16 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
 </div>
 {{< /example >}}
 
+## Custom transition
+
+The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}}
+
 ## Usage
 
 ### Via data attributes
@@ -446,7 +456,3 @@ myCarousel.addEventListener('slide.bs.carousel', function () {
   // do something...
 })
 ```
-
-### Change transition duration
-
-The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md
index a6bb3f4c0..f4a3ed071 100644
--- a/site/content/docs/5.0/components/close-button.md
+++ b/site/content/docs/5.0/components/close-button.md
@@ -30,3 +30,9 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class. T
 <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
 <button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
index 8546aaeb5..fe26918c1 100644
--- a/site/content/docs/5.0/components/collapse.md
+++ b/site/content/docs/5.0/components/collapse.md
@@ -77,6 +77,18 @@ If your control element is targeting a single collapsible element – i.e. the `
 
 Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}}
+
+### Classes
+
+Collapse transition classes can be found in `scss/_transitions.scss` as these are shared across multiple components (collapse and accordion).
+
+{{< scss-docs name="collapse-classes" file="scss/_transitions.scss" >}}
+
 ## Usage
 
 The collapse plugin utilizes a few classes to handle the heavy lifting:
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 24353f0f4..d74eec765 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -903,6 +903,28 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
 </div>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+Variables for all dropdowns:
+
+{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
+
+Variables for the [dark dropdown](#dark-dropdowns):
+
+{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}}
+
+Variables for the CSS-based carets that indicate a dropdown's interactivity:
+
+{{< scss-docs name="caret-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`.
+
+{{< scss-docs name="caret-mixins" file="scss/mixins/_caret.scss" >}}
+
 ## Usage
 
 Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-bs-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md
index 5213ef5ca..1ac5a9a2b 100644
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.0/components/list-group.md
@@ -254,6 +254,23 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
 </div>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
+
+{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
+
+### Loop
+
+Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
+
+{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
 
 ## JavaScript behavior
 
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index 52493d4e8..0abe0ce0f 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -793,6 +793,18 @@ Another override is the option to pop up a modal that covers the user viewport,
   </div>
 </div>
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
+
+### Loop
+
+[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
+
+{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}}
+
 ## Usage
 
 The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md
index b9b00c3bb..34d43a29a 100644
--- a/site/content/docs/5.0/components/navbar.md
+++ b/site/content/docs/5.0/components/navbar.md
@@ -646,3 +646,17 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 {{< /example >}}
 
 When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
+
+### Loop
+
+[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
+
+{{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}}
diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md
index 822aec14c..ee97d85a4 100644
--- a/site/content/docs/5.0/components/navs-tabs.md
+++ b/site/content/docs/5.0/components/navs-tabs.md
@@ -304,6 +304,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 </ul>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
+
 ## JavaScript behavior
 
 Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
diff --git a/site/content/docs/5.0/components/pagination.md b/site/content/docs/5.0/components/pagination.md
index 23b474589..6b7c7a3da 100644
--- a/site/content/docs/5.0/components/pagination.md
+++ b/site/content/docs/5.0/components/pagination.md
@@ -155,3 +155,13 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
   </ul>
 </nav>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index 8a2efa0a2..9506fa8f7 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -109,6 +109,12 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
 </span>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
+
 ## Usage
 
 Enable popovers via JavaScript:
diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md
index 92834bebf..1b59dc97a 100644
--- a/site/content/docs/5.0/components/progress.md
+++ b/site/content/docs/5.0/components/progress.md
@@ -137,3 +137,15 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
 </div>
 ```
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
+
+### Keyframes
+
+Used for creating the CSS animations for `.progress-bar-animated`. Included in `scss/_progress-bar.scss`.
+
+{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md
index d2495b420..37908f5b6 100644
--- a/site/content/docs/5.0/components/spinners.md
+++ b/site/content/docs/5.0/components/spinners.md
@@ -171,6 +171,20 @@ Use spinners within buttons to indicate an action is currently processing or tak
 </button>
 {{< /example >}}
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}}
+
+### Keyframes
+
+Used for creating the CSS animations for our spinners. Included in `scss/_spinners.scss`.
+
+{{< scss-docs name="spinner-border-keyframes" file="scss/_spinners.scss" >}}
+
+{{< scss-docs name="spinner-grow-keyframes" file="scss/_spinners.scss" >}}
+
 
 [color]:   {{< docsref "/utilities/colors" >}}
 [display]: {{< docsref "/utilities/display" >}}
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 5f7a59db6..20aefb249 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -304,9 +304,13 @@ When using `autohide: false`, you must add a close button to allow users to dism
 </div>
 {{< /example >}}
 
-## JavaScript behavior
+## Sass
 
-### Usage
+### Variables
+
+{{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
+
+## Usage
 
 Initialize toasts via JavaScript:
 
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index ee6d06e9e..6c3577f3c 100644
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.0/components/tooltips.md
@@ -96,6 +96,12 @@ With an SVG:
   </a>
 </div>
 
+## Sass
+
+### Variables
+
+{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
+
 ## Usage
 
 The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
diff --git a/site/content/docs/5.0/content/figures.md b/site/content/docs/5.0/content/figures.md
index f5956614f..29a38d723 100644
--- a/site/content/docs/5.0/content/figures.md
+++ b/site/content/docs/5.0/content/figures.md
@@ -3,6 +3,7 @@ layout: docs
 title: Figures
 description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
 group: content
+toc: true
 ---
 
 Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
@@ -24,3 +25,9 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
   <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
 </figure>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.0/content/images.md
index 271b08e30..f1012efbf 100644
--- a/site/content/docs/5.0/content/images.md
+++ b/site/content/docs/5.0/content/images.md
@@ -53,3 +53,11 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
   <img src="..." class="img-fluid img-thumbnail" alt="...">
 </picture>
 ```
+
+## Sass
+
+### Variables
+
+Variables are available for image thumbnails.
+
+{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md
index dde90b997..3681e186a 100644
--- a/site/content/docs/5.0/content/tables.md
+++ b/site/content/docs/5.0/content/tables.md
@@ -775,9 +775,17 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< /tables.inline >}}
 {{< /highlight >}}
 
-## Customizing in Sass
+## Sass
+
+### Variables
+
+{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
+
+### Loop
+
+{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
+
+### Customizing
 
 - The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
 - Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable.
-
-{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md
index cf9c83636..7d41f04de 100644
--- a/site/content/docs/5.0/content/typography.md
+++ b/site/content/docs/5.0/content/typography.md
@@ -302,3 +302,19 @@ Align terms and descriptions horizontally by using our grid system's predefined
 ## Responsive font sizes
 
 In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
+
+## Sass
+
+### Variables
+
+Headings have some dedicated variables for sizing and spacing.
+
+{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
+
+Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables.
+
+{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md
index ae89f5ee3..7fefb6aa6 100644
--- a/site/content/docs/5.0/forms/checks-radios.md
+++ b/site/content/docs/5.0/forms/checks-radios.md
@@ -269,3 +269,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported
 <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
 <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md
index 2012a4e82..941055089 100644
--- a/site/content/docs/5.0/forms/floating-labels.md
+++ b/site/content/docs/5.0/forms/floating-labels.md
@@ -100,3 +100,9 @@ When working with the Bootstrap grid system, be sure to place form elements with
   </div>
 </div>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md
index e35f09967..41fd759d7 100644
--- a/site/content/docs/5.0/forms/form-control.md
+++ b/site/content/docs/5.0/forms/form-control.md
@@ -130,3 +130,17 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
   <option value="Chicago">
 </datalist>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
+
+`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component.
+
+{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 19ffcbcfd..00e9eeec9 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -308,3 +308,9 @@ Input groups include support for custom selects and custom file inputs. Browser
   <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md
index dcd8e8ccd..40e9b6b4f 100644
--- a/site/content/docs/5.0/forms/overview.md
+++ b/site/content/docs/5.0/forms/overview.md
@@ -142,3 +142,13 @@ For situations where it's not possible to include a visible `<label>` or appropr
 If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
 
 While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
+
+## Sass
+
+Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables.
+
+### Variables
+
+`$btn-input-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables.
+
+{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.0/forms/range.md
index 7e95e0edf..302d6ce68 100644
--- a/site/content/docs/5.0/forms/range.md
+++ b/site/content/docs/5.0/forms/range.md
@@ -41,3 +41,9 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <label for="customRange3" class="form-label">Example range</label>
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/select.md b/site/content/docs/5.0/forms/select.md
index e2b0bd6a8..7f0c255ef 100644
--- a/site/content/docs/5.0/forms/select.md
+++ b/site/content/docs/5.0/forms/select.md
@@ -73,3 +73,9 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
   <option value="3">Three</option>
 </select>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 3f45143d7..128f6b408 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -349,18 +349,34 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 </form>
 {{< /example >}}
 
-## Customizing
+## Sass
 
-Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+### Variables
 
-Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
+{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
 
-This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states:
+### Mixins
+
+Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
+
+{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
+
+### Map
+
+This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
 
 {{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
 
 Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
 
-This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
+### Loop
+
+Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
 
 {{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
+
+### Customizing
+
+Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
+
+Please note that **we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin**.
diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
index 459ca4e72..14f700529 100644
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/site/content/docs/5.0/utilities/borders.md
@@ -77,3 +77,23 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 {{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
+
+### Mixins
+
+{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
+
+### Utilities
+
+Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-borders" file="scss/_utilities.scss" >}}
+
+{{< scss-docs name="utils-border-radius" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md
index 0d773272d..2e22ed988 100644
--- a/site/content/docs/5.0/utilities/flex.md
+++ b/site/content/docs/5.0/utilities/flex.md
@@ -627,3 +627,11 @@ Responsive variations also exist for `align-content`.
 {{- end -}}
 {{< /flex.inline >}}
 {{< /markdown >}}
+
+## Sass
+
+### Utilities API
+
+Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/float.md b/site/content/docs/5.0/utilities/float.md
index 4d27c00d2..a18c21471 100644
--- a/site/content/docs/5.0/utilities/float.md
+++ b/site/content/docs/5.0/utilities/float.md
@@ -38,3 +38,11 @@ Here are all the support classes:
 {{- end -}}
 {{< /float.inline >}}
 {{< /markdown >}}
+
+## Sass
+
+### Utilities API
+
+Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-float" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/interactions.md b/site/content/docs/5.0/utilities/interactions.md
index fdb6e1a48..b95b98a10 100644
--- a/site/content/docs/5.0/utilities/interactions.md
+++ b/site/content/docs/5.0/utilities/interactions.md
@@ -29,3 +29,11 @@ Bootstrap provides `.pe-none` and `.pe-auto` classes to prevent or add element i
 {{< callout warning >}}
 The `.pe-none` class (and the `pointer-events` CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with `.pe-none` are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as `tabindex="-1"` (to prevent them from receiving keyboard focus) and `aria-disabled="true"` (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable. For form controls, consider using the `disabled` HTML attribute instead.
 {{< /callout >}}
+
+## Sass
+
+### Utilities API
+
+Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-interaction" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/overflow.md b/site/content/docs/5.0/utilities/overflow.md
index f05df6800..a36374cd5 100644
--- a/site/content/docs/5.0/utilities/overflow.md
+++ b/site/content/docs/5.0/utilities/overflow.md
@@ -30,3 +30,11 @@ Adjust the `overflow` property on the fly with four default values and classes.
 ```
 
 Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
+
+## Sass
+
+### Utilities API
+
+Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-overflow" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md
index 63ce589b3..bc57eb028 100644
--- a/site/content/docs/5.0/utilities/position.md
+++ b/site/content/docs/5.0/utilities/position.md
@@ -115,3 +115,16 @@ You can use these classes with existing components to create new ones. Remember
 </div>
 {{< /example >}}
 
+## Sass
+
+### Maps
+
+Default position utility values are declared in a Sass map, then used to generate our utilities.
+
+{{< scss-docs name="position-map" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-position" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/shadows.md b/site/content/docs/5.0/utilities/shadows.md
index c1a155689..bb5ef44ab 100644
--- a/site/content/docs/5.0/utilities/shadows.md
+++ b/site/content/docs/5.0/utilities/shadows.md
@@ -3,6 +3,7 @@ layout: docs
 title: Shadows
 description: Add or remove shadows to elements with box-shadow utilities.
 group: utilities
+toc: true
 ---
 
 ## Examples
@@ -15,3 +16,15 @@ While shadows on components are disabled by default in Bootstrap and can be enab
 <div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
 <div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-shadow" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/sizing.md b/site/content/docs/5.0/utilities/sizing.md
index 3a12caa2d..962575ffe 100644
--- a/site/content/docs/5.0/utilities/sizing.md
+++ b/site/content/docs/5.0/utilities/sizing.md
@@ -50,3 +50,11 @@ You can also use utilities to set the width and height relative to the viewport.
 <div class="vw-100">Width 100vw</div>
 <div class="vh-100">Height 100vh</div>
 ```
+
+## Sass
+
+### Utilities API
+
+Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-sizing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/spacing.md b/site/content/docs/5.0/utilities/spacing.md
index 2fec4e1cf..a38c2659f 100644
--- a/site/content/docs/5.0/utilities/spacing.md
+++ b/site/content/docs/5.0/utilities/spacing.md
@@ -109,3 +109,17 @@ When using `display: grid`, you can make use of `gap` utilities on the parent gr
 {{< /example >}}
 
 Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
+
+## Sass
+
+### Maps
+
+Spacing utilities are declared via Sass map and then generated with our utilities API.
+
+{{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-spacing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/text.md b/site/content/docs/5.0/utilities/text.md
index d76cad15f..41c92958c 100644
--- a/site/content/docs/5.0/utilities/text.md
+++ b/site/content/docs/5.0/utilities/text.md
@@ -82,8 +82,6 @@ Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`
 
 Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
 
-{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
-
 ## Font weight and italics
 
 Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`.
@@ -136,3 +134,21 @@ Decorate text in components with text decoration classes.
 <p class="text-decoration-line-through">This text has a line going through it.</p>
 <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
 {{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
+
+### Maps
+
+Font-size utilities are generated from this map, in combination with our utilities API.
+
+{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
+
+### Utilities API
+
+Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-text" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/vertical-align.md b/site/content/docs/5.0/utilities/vertical-align.md
index f7cf2207b..9fe0eeb93 100644
--- a/site/content/docs/5.0/utilities/vertical-align.md
+++ b/site/content/docs/5.0/utilities/vertical-align.md
@@ -38,3 +38,11 @@ With table cells:
   </tbody>
 </table>
 {{< /example >}}
+
+## Sass
+
+### Utilities API
+
+Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-vertical-align" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/visibility.md b/site/content/docs/5.0/utilities/visibility.md
index 349685bd6..61eb30241 100644
--- a/site/content/docs/5.0/utilities/visibility.md
+++ b/site/content/docs/5.0/utilities/visibility.md
@@ -27,3 +27,11 @@ Apply `.visible` or `.invisible` as needed.
   visibility: hidden !important;
 }
 ```
+
+## Sass
+
+### Utilities API
+
+Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-visibility" file="scss/_utilities.scss" >}}