Convert added in badges to shortcode (#36007)

diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
index 54e2113483daf83820b8074c2a49f3834c7e6705..68a18be7ada8f416ff64703c4a06081d4fb96345 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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 2e604c82a9098aa1a6c19a03c7f56ced43865a01..e00b21a12b91ffe2f8db401be520a49cf06c51d5 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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/breadcrumb.md b/site/content/docs/5.1/components/breadcrumb.md
index dabf6b58b494995c0c48aa1d35255947a229914e..05df37a0aa331c1c43e933c4540dea24bf2cc830 100644 (file)
--- a/site/content/docs/5.1/components/breadcrumb.md
+++ b/site/content/docs/5.1/components/breadcrumb.md
@@ -100,7 +100,7 @@ For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb p
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
+{{< added-in "5.2.0" >}}
 
 As part of Bootstrap's evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` 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 59a013a734124cfd3e43d62e5f8a4e1d91c7ae88..7f400df1a19fa38116993153eac4971508ef2711 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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 e5a396d56c85cc3f5b205ee9f4cb3de027dd3e63..0bd6a4fdfe073fd0a7d2d2d27112207c50d95c49 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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 f54b8ff8cf86dddac2f78c78796dbb25fc64776c..7b36f245c1e6478551892e361de9b263d410afb0 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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 eebc3ce6f1af05de8a94d3d671166f8fffd9ee9e..8e05a18614a5173f52cd6df9432000e8ba3035a4 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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/popovers.md b/site/content/docs/5.1/components/popovers.md
index 44c053b671fbe07b975d1ec466a398f22ce4a6b1..93ccc6f783a35ba0a92c24cda8ebff761576dfec 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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 8ec95c137f586eefc3abe137b1a54f40f84a8655..ee2808f41b419203d423e5b495449e7031c4ca76 100644 (file)
--- 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 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.
 

diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index 9403efc535a3ff8407308d1911c8ef80d173d9cd..04c4cdebf7e22b805a3b1194ae1abb08555f264d 100644 (file)
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -20,7 +20,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 
 ## CSS variables
 
-<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>
+{{< added-in "5.2.0" >}}
 
 With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
 

diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md
index 1b9647645b2f08e32a1f02c99f6aa91da9309b13..23a7f7104282a8f8ee07e72413ba523af4f85869 100644 (file)
--- a/site/content/docs/5.1/customize/color.md
+++ b/site/content/docs/5.1/customize/color.md
@@ -109,7 +109,7 @@ Here's how you can use these in your Sass:
 
 ## Generating utilities
 
-<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
+{{< added-in "5.1.0" >}}
 
 Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
 

diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.1/utilities/background.md
index 728254f1cf3ecdac8dff699d09fa3fda854c2827..fe0bf573b8f4c914a214ee58f38977e751b544c7 100644 (file)
--- a/site/content/docs/5.1/utilities/background.md
+++ b/site/content/docs/5.1/utilities/background.md
@@ -37,7 +37,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 ## Opacity
 
-<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
+{{< added-in "5.1.0" >}}
 
 As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 

diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md
index 49df82df894c6012a9ed9ed568462a1e19272387..6939dcdf8ac48d930a395cdafc9f6ad0ae115727 100644 (file)
--- a/site/content/docs/5.1/utilities/borders.md
+++ b/site/content/docs/5.1/utilities/borders.md
@@ -45,7 +45,7 @@ Change the border color using utilities built on our theme colors.
 
 ## Opacity
 
-<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>
+{{< added-in "5.2.0" >}}
 
 Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 

diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md
index 329c371d1134e182a55bb4f2f52776e930ffae56..eb917f91c2f6b0690bfda9626672d929389550a5 100644 (file)
--- a/site/content/docs/5.1/utilities/colors.md
+++ b/site/content/docs/5.1/utilities/colors.md
@@ -33,7 +33,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 
 ## Opacity
 
-<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
+{{< added-in "5.1.0" >}}
 
 As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 

diff --git a/site/layouts/shortcodes/added-in.html b/site/layouts/shortcodes/added-in.html
new file mode 100644 (file)
index 0000000..ca461c2
--- /dev/null
+++ b/site/layouts/shortcodes/added-in.html
@@ -0,0 +1,5 @@
+{{- /* Outputs badge to identify the first version something was added */ -}}
+
+{{- $version := .Get 0 -}}
+
+<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2">Added in v{{ $version }}</small>