Redesign the "Added in" badges in the docs (#35980)

Co-authored-by: XhmikosR <[email protected]>

9 files changed, 11 insertions, 10 deletions

diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
index 27feda577..54e211348 100644
--- a/site/content/docs/5.1/components/alerts.md
+++ b/site/content/docs/5.1/components/alerts.md
@@ -160,7 +160,7 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md
index e9b75f716..2e604c82a 100644
--- a/site/content/docs/5.1/components/badge.md
+++ b/site/content/docs/5.1/components/badge.md
@@ -90,7 +90,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, badges 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.
 
diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md
index c2416700b..59a013a73 100644
--- a/site/content/docs/5.1/components/buttons.md
+++ b/site/content/docs/5.1/components/buttons.md
@@ -242,7 +242,7 @@ buttons.forEach(function (button) {
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
index 7971e0dfd..e5a396d56 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -991,7 +991,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md
index 08eb70527..f54b8ff8c 100644
--- a/site/content/docs/5.1/components/navbar.md
+++ b/site/content/docs/5.1/components/navbar.md
@@ -736,7 +736,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md
index 58f3fab63..eebc3ce6f 100644
--- a/site/content/docs/5.1/components/pagination.md
+++ b/site/content/docs/5.1/components/pagination.md
@@ -160,7 +160,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/site/content/docs/5.1/components/placeholders.md b/site/content/docs/5.1/components/placeholders.md
index 7b380b603..4de405756 100644
--- a/site/content/docs/5.1/components/placeholders.md
+++ b/site/content/docs/5.1/components/placeholders.md
@@ -4,6 +4,7 @@ title: Placeholders
 description: Use loading placeholders for your components or pages to indicate something may still be loading.
 group: components
 toc: true
+added: "5.1"
 ---
 
 ## About
diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md
index 90132cf19..44c053b67 100644
--- a/site/content/docs/5.1/components/popovers.md
+++ b/site/content/docs/5.1/components/popovers.md
@@ -83,7 +83,7 @@ var popover = new bootstrap.Popover(document.querySelector('.example-popover'),
 
 ### Custom popovers
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
 
@@ -135,7 +135,7 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index 1adcc877e..8ec95c137 100644
--- a/site/content/docs/5.1/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -54,7 +54,7 @@ Hover over the links below to see tooltips:
 
 ### Custom tooltips
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
 
@@ -125,7 +125,7 @@ With an SVG:
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.