Add Extend > Snippets docs pageextend-snippets

1 files changed, 33 insertions, 0 deletions

diff --git a/site/content/docs/5.1/extend/snippets.md b/site/content/docs/5.1/extend/snippets.md
new file mode 100644
index 000000000..a006194e7
--- /dev/null
+++ b/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