Remove added badges from docs pages (#41694)

mdo · mdo · commit c0f88d638a04 · 2025-09-20T22:15:23.000-07:00
* Remove added badges from docs pages

* Remove AddedIn
diff --git a/site/src/components/shortcodes/AddedIn.astro b/site/src/components/shortcodes/AddedIn.astro
diff --git a/site/src/components/shortcodes/CSSVariables.astro b/site/src/components/shortcodes/CSSVariables.astro
@@ -0,0 +1,13 @@
+---
+interface Props {
+  component: string
+  className?: string
+}
+
+const { component, className } = Astro.props
+---
+
+<p>
+  {component} use local CSS variables on <code>.{className}</code> for real-time customization.
+  Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+</p>
diff --git a/site/src/content/docs/components/accordion.mdx b/site/src/content/docs/components/accordion.mdx
@@ -149,9 +149,7 @@ Please read the [collapse accessibility section]([[docsref:/components/collapse#
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Accordions" className="accordion" />
 
 <ScssDocs name="accordion-css-vars" file="scss/_accordion.scss" />
 
diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
@@ -122,9 +122,7 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Alerts" className="alert" />
 
 <ScssDocs name="alert-css-vars" file="scss/_alert.scss" />
 
diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx
@@ -54,8 +54,6 @@ You can also replace the `.badge` class with a few more utilities without a coun
 
 ## Background colors
 
-<AddedIn version="5.2.0" />
-
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
 
 <Example code={getData('theme-colors').map((themeColor) => `<span class="badge text-bg-${themeColor.name}">${themeColor.title}</span>`)} />
@@ -72,9 +70,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Badges" className="badge" />
 
 <ScssDocs name="badge-css-vars" file="scss/_badge.scss" />
 
diff --git a/site/src/content/docs/components/breadcrumb.mdx b/site/src/content/docs/components/breadcrumb.mdx
@@ -86,9 +86,7 @@ For more information, see the [ARIA Authoring Practices Guide breadcrumb pattern
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Breadcrumbs" className="breadcrumb" />
 
 <ScssDocs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" />
 
diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx
@@ -190,9 +190,7 @@ document.querySelectorAll('.btn').forEach(buttonElement => {
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Buttons" className="btn" />
 
 <ScssDocs name="btn-css-vars" file="scss/_buttons.scss" />
 
diff --git a/site/src/content/docs/components/card.mdx b/site/src/content/docs/components/card.mdx
@@ -379,8 +379,6 @@ Cards include various options for customizing their backgrounds, borders, and co
 
 ### Background and color
 
-<AddedIn version="5.2.0" />
-
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]([[docsref:helpers/color-background]]). Previously it was required to manually pair your choice of [`.text-{color}`]([[docsref:/utilities/colors]]) and [`.bg-{color}`]([[docsref:/utilities/background]]) utilities for styling, which you still may use if you prefer.
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="card text-bg-${themeColor.name} mb-3" style="max-width: 18rem;">
@@ -662,9 +660,7 @@ In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, cards now use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Cards" className="card" />
 
 <ScssDocs name="card-css-vars" file="scss/_card.scss" />
 
diff --git a/site/src/content/docs/components/close-button.mdx b/site/src/content/docs/components/close-button.mdx
@@ -29,9 +29,7 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv
 
 ### Variables
 
-<AddedIn version="5.3.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Close button" className="btn-close" />
 
 <ScssDocs name="close-css-vars" file="scss/_close.scss" />
 
diff --git a/site/src/content/docs/components/dropdowns.mdx b/site/src/content/docs/components/dropdowns.mdx
@@ -927,9 +927,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Dropdowns" className="dropdown-menu" />
 
 <ScssDocs name="dropdown-css-vars" file="scss/_dropdown.scss" />
 
diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx
@@ -253,9 +253,7 @@ You can use `.stretched-link` on `<label>`s to make the whole list group item cl
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, list groups now use local CSS variables on `.list-group` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="List groups" className="list-group" />
 
 <ScssDocs name="list-group-css-vars" file="scss/_list-group.scss" />
 
diff --git a/site/src/content/docs/components/modal.mdx b/site/src/content/docs/components/modal.mdx
@@ -725,9 +725,7 @@ Another override is the option to pop up a modal that covers the user viewport,
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, modals now use local CSS variables on `.modal` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Modals" className="modal" />
 
 <ScssDocs name="modal-css-vars" file="scss/_modal.scss" />
 
diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx
@@ -721,9 +721,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Navbars" className="navbar" />
 
 <ScssDocs name="navbar-css-vars" file="scss/_navbar.scss" />
 
diff --git a/site/src/content/docs/components/navs-tabs.mdx b/site/src/content/docs/components/navs-tabs.mdx
@@ -295,9 +295,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, navs now use local CSS variables on `.nav`, `.nav-tabs`, and `.nav-pills` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Navs" className="nav" />
 
 On the `.nav` base class:
 
@@ -311,8 +309,6 @@ On the `.nav-pills` modifier class:
 
 <ScssDocs name="nav-pills-css-vars" file="scss/_nav.scss" />
 
-<AddedIn version="5.3.0" />
-
 On the `.nav-underline` modifier class:
 
 <ScssDocs name="nav-underline-css-vars" file="scss/_nav.scss" />
diff --git a/site/src/content/docs/components/offcanvas.mdx b/site/src/content/docs/components/offcanvas.mdx
@@ -139,8 +139,6 @@ Change the appearance of offcanvases with utilities to better match them to diff
 
 ## Responsive
 
-<AddedIn version="5.2.0" />
-
 Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive offcanvas classes are available for each breakpoint.
 
 - `.offcanvas`
@@ -221,9 +219,7 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Offcanvas" className="offcanvas" />
 
 <ScssDocs name="offcanvas-css-vars" file="scss/_offcanvas.scss" />
 
diff --git a/site/src/content/docs/components/pagination.mdx b/site/src/content/docs/components/pagination.mdx
@@ -156,9 +156,7 @@ Or with `.justify-content-end`:
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Pagination" className="pagination" />
 
 <ScssDocs name="pagination-css-vars" file="scss/_pagination.scss" />
 
diff --git a/site/src/content/docs/components/placeholders.mdx b/site/src/content/docs/components/placeholders.mdx
@@ -2,8 +2,6 @@
 title: Placeholders
 description: Use loading placeholders (skeleton loaders) for your components or pages to indicate something may still be loading.
 toc: true
-added:
-  version: "5.1"
 ---
 
 import { getData } from '@libs/data'
diff --git a/site/src/content/docs/components/popovers.mdx b/site/src/content/docs/components/popovers.mdx
@@ -81,8 +81,6 @@ const popover = new bootstrap.Popover('.example-popover', {
 
 ### Custom popovers
 
-<AddedIn version="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.
 
 <ScssDocs name="custom-popovers" file="site/src/scss/_component-examples.scss" />
@@ -125,9 +123,7 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Popovers" className="popover" />
 
 <ScssDocs name="popover-css-vars" file="scss/_popover.scss" />
 
diff --git a/site/src/content/docs/components/progress.mdx b/site/src/content/docs/components/progress.mdx
@@ -153,9 +153,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on `.progress` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Progress" className="progress" />
 
 <ScssDocs name="progress-css-vars" file="scss/_progress.scss" />
 
diff --git a/site/src/content/docs/components/spinners.mdx b/site/src/content/docs/components/spinners.mdx
@@ -139,9 +139,7 @@ Use spinners within buttons to indicate an action is currently processing or tak
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on `.spinner-border` and `.spinner-grow` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Spinners" className="spinner-{border|grow}" />
 
 Border spinner variables:
 
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
@@ -294,9 +294,7 @@ While technically it’s possible to add focusable/actionable controls (such as
 
 ### Variables
 
-<AddedIn version="5.2.0" />
-
-As part of Bootstrap’s evolving CSS variables approach, toasts now use local CSS variables on `.toast` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+<CSSVariables component="Toasts" className="toast" />
 
 <ScssDocs name="toast-css-vars" file="scss/_toasts.scss" />
 
diff --git a/site/src/content/docs/components/tooltips.mdx b/site/src/content/docs/components/tooltips.mdx
@@ -45,8 +45,6 @@ Hover over the links below to see tooltips:
 
 ### Custom tooltips
 
-<AddedIn version="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.
 
 <ScssDocs name="custom-tooltip" file="site/src/scss/_component-examples.scss" />
@@ -108,9 +106,7 @@ With an SVG:
 
 ### Variables
 
-<AddedIn version="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.
+<CSSVariables component="Tooltips" className="tooltip" />
 
 <ScssDocs name="tooltip-css-vars" file="scss/_tooltip.scss" />
 
diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx
@@ -18,8 +18,6 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 
 ## CSS variables
 
-<AddedIn version="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.**
 
 For example, consider these `:root` CSS variables for common `<body>` styles:
diff --git a/site/src/content/docs/customize/color-modes.mdx b/site/src/content/docs/customize/color-modes.mdx
@@ -2,8 +2,6 @@
 title: Color modes
 description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
 toc: true
-added:
-  version: "5.3"
 ---
 
 import { getDocsRelativePath } from '@libs/path'
diff --git a/site/src/content/docs/customize/color.mdx b/site/src/content/docs/customize/color.mdx
@@ -9,8 +9,6 @@ import { getSequence } from '@libs/utils'
 
 ## Colors
 
-<AddedIn version="5.3.0" />
-
 Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
 
 Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
@@ -470,8 +468,6 @@ Here’s how you can use these in your Sass:
 
 ## Generating utilities
 
-<AddedIn version="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.
 
 1. To start, make sure you’ve imported our functions, variables, mixins, and utilities.
diff --git a/site/src/content/docs/customize/css-variables.mdx b/site/src/content/docs/customize/css-variables.mdx
@@ -53,8 +53,6 @@ a {
 
 ## Focus variables
 
-<AddedIn version="5.3.0"/>
-
 Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles.
 
 In our Sass, we set default values that can be customized before compiling.
diff --git a/site/src/content/docs/forms/validation.mdx b/site/src/content/docs/forms/validation.mdx
@@ -339,8 +339,6 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 
 ### Variables
 
-<AddedIn version="5.3.0"/>
-
 As part of Bootstrap’s evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
 <ScssDocs name="root-form-validation-variables" file="scss/_root.scss" />
diff --git a/site/src/content/docs/getting-started/contribute.mdx b/site/src/content/docs/getting-started/contribute.mdx
@@ -3,9 +3,6 @@ title: Contribute
 description: Help develop Bootstrap with our documentation build scripts and tests.
 toc: true
 aliases: "/docs/[[config:docs_version]]/getting-started/build-tools/"
-added:
-  show_badge: false
-  version: "5.1"
 ---
 ## Tooling setup
 
diff --git a/site/src/content/docs/getting-started/vite.mdx b/site/src/content/docs/getting-started/vite.mdx
@@ -3,9 +3,6 @@ title: Bootstrap and Vite
 description: The official guide for how to include and bundle Bootstrap’s CSS and JavaScript in your project using Vite.
 toc: true
 thumbnail: guides/bootstrap-vite@2x.png
-added:
-  show_badge: false
-  version: "5.2"
 ---
 
 <img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png, /docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/[[config:docs_version]]/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="" />
diff --git a/site/src/content/docs/helpers/color-background.mdx b/site/src/content/docs/helpers/color-background.mdx
@@ -2,8 +2,6 @@
 title: Color and background
 description: Set a background color with contrasting foreground color.
 toc: true
-added:
-  version: "5.2"
 ---
 
 import { getData } from '@libs/data'
diff --git a/site/src/content/docs/helpers/colored-links.mdx b/site/src/content/docs/helpers/colored-links.mdx
@@ -23,8 +23,6 @@ You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` class
 
 ## Link utilities
 
-<AddedIn version="5.3.0"/>
-
 Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]).
 
 <Example code={[
diff --git a/site/src/content/docs/helpers/focus-ring.mdx b/site/src/content/docs/helpers/focus-ring.mdx
diff --git a/site/src/content/docs/helpers/icon-link.mdx b/site/src/content/docs/helpers/icon-link.mdx
diff --git a/site/src/content/docs/helpers/stacks.mdx b/site/src/content/docs/helpers/stacks.mdx
diff --git a/site/src/content/docs/helpers/vertical-rule.mdx b/site/src/content/docs/helpers/vertical-rule.mdx
diff --git a/site/src/content/docs/layout/css-grid.mdx b/site/src/content/docs/layout/css-grid.mdx
diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx
diff --git a/site/src/content/docs/utilities/borders.mdx b/site/src/content/docs/utilities/borders.mdx
diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx
diff --git a/site/src/content/docs/utilities/link.mdx b/site/src/content/docs/utilities/link.mdx
diff --git a/site/src/content/docs/utilities/object-fit.mdx b/site/src/content/docs/utilities/object-fit.mdx
diff --git a/site/src/content/docs/utilities/opacity.mdx b/site/src/content/docs/utilities/opacity.mdx
diff --git a/site/src/content/docs/utilities/z-index.mdx b/site/src/content/docs/utilities/z-index.mdx
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
