From 7e71fe7bae443f6a7cabac6422514c45601f8b4e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 16 Nov 2021 19:01:30 -0800
Subject: Convert .badge to CSS variables

---
 site/content/docs/5.1/components/badge.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'site/content/docs')

diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md
index de80d3b27a..751871bea2 100644
--- a/site/content/docs/5.1/components/badge.md
+++ b/site/content/docs/5.1/components/badge.md
@@ -86,8 +86,16 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 {{< /badge.inline >}}
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
-- 
cgit v1.2.3