Add Extend > Snippets docs page

site/assets/scss/_snippets.scss

@@ -0,0 +1,7 @@
+@each $color, $value in $theme-colors {
+  $btn-light-bg: shift-color($value, -80%);
+  $btn-light-border: shift-color($value, -80%);
+  .btn-light-#{$color} {
+    @include button-variant($btn-light-bg, $btn-light-border, shift-color($value, 50%));
+  }
+}

site/assets/scss/docs.scss

@@ -53,6 +53,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "colors";
 @import "clipboard-js";
 @import "placeholder-img";
+@import "snippets";
 
 // Load docs dependencies
 @import "syntax";

site/content/docs/5.1/extend/snippets.md

@@ -0,0 +1,33 @@
+---
+layout: docs
+title: Snippets
+description: Extend Bootstrap with some common snippets of source code not included in the main project.
+group: extend
+---
+
+## Components
+
+### Light buttons
+
+{{< example >}}
+{{< buttons.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<button type="button" class="btn btn-light-{{ .name }}">{{ .name | title }}</button>
+{{- end -}}
+{{< /buttons.inline >}}
+{{< /example >}}
+
+```scss
+@each $color, $value in $theme-colors {
+  $btn-light-bg: shift-color($value, -80%);
+  $btn-light-border: shift-color($value, -80%);
+  .btn-light-#{$color} {
+    @include button-variant($btn-light-bg, $btn-light-border, shift-color($value, 50%));
+  }
+}
+```
+
+## Utilities
+
+- Opacity
+- Expanded widths/heights

site/data/sidebar.yml

@@ -118,6 +118,7 @@
 - title: Extend
   pages:
     - title: Approach
+    - title: Snippets
     - title: Icons
 
 - title: About