From 2c7e39c9d51afbcc107d7e441951e35364fb9a3d Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Mon, 18 May 2026 15:39:57 +0900 Subject: [PATCH] v6: docs - Update utility class names in docs and examples Replace deprecated utility classes with the updated names across site docs and examples. Changes include switching text-* classes to fg-*, text-bg-* badge classes to theme-*, and replacing clearfix with d-flow-root. Affected files: cover and drawer-navbar examples, spinner example, reboot, accessibility, columns docs, and versions page to keep examples consistent with the new utility naming. Add btn-icon class to navbar toggler Add the btn-icon utility class to the navbar toggler button in the navbar-fixed example to apply icon button styling. This change updates site/src/assets/examples/navbar-fixed/index.astro and keeps the existing SVG toggler markup and collapse behavior unchanged. --- site/src/assets/examples/blog/index.astro | 4 +-- .../src/assets/examples/dashboard/index.astro | 2 +- .../assets/examples/drawer-navbar/index.astro | 2 +- site/src/assets/examples/headers/index.astro | 4 +-- .../assets/examples/navbar-fixed/index.astro | 2 +- .../examples/navbars-drawer/index.astro | 6 ++-- site/src/assets/examples/pricing/index.astro | 28 +++++++-------- site/src/assets/examples/product/index.astro | 36 +++++++++---------- site/src/components/home/MastHead.astro | 4 +-- site/src/content/docs/components/navbar.mdx | 20 +++++------ site/src/content/docs/components/spinner.mdx | 2 +- site/src/content/docs/content/reboot.mdx | 2 +- .../docs/getting-started/accessibility.mdx | 2 +- site/src/content/docs/layout/columns.mdx | 2 +- .../src/content/docs/utilities/object-fit.mdx | 14 ++++---- site/src/layouts/partials/ExamplesMain.astro | 2 +- site/src/pages/docs/versions.astro | 4 +-- 17 files changed, 68 insertions(+), 68 deletions(-) diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro index 3456f51b782c..0667ba03082a 100644 --- a/site/src/assets/examples/blog/index.astro +++ b/site/src/assets/examples/blog/index.astro @@ -21,13 +21,13 @@ import Placeholder from "@shortcodes/Placeholder.astro"
- Subscribe + Subscribe
- + Search Sign up diff --git a/site/src/assets/examples/dashboard/index.astro b/site/src/assets/examples/dashboard/index.astro index 0aa029ba1dfa..8fa1d6295156 100644 --- a/site/src/assets/examples/dashboard/index.astro +++ b/site/src/assets/examples/dashboard/index.astro @@ -128,7 +128,7 @@ export const extra_js = [
Saved reports - +
diff --git a/site/src/assets/examples/drawer-navbar/index.astro b/site/src/assets/examples/drawer-navbar/index.astro index 609817634eb0..7cdfc8084082 100644 --- a/site/src/assets/examples/drawer-navbar/index.astro +++ b/site/src/assets/examples/drawer-navbar/index.astro @@ -52,7 +52,7 @@ import Placeholder from "@shortcodes/Placeholder.astro" Dashboard Friends - 27 + 27 Explore Suggestions diff --git a/site/src/assets/examples/headers/index.astro b/site/src/assets/examples/headers/index.astro index 88c952ecea4b..0dba47145c6c 100644 --- a/site/src/assets/examples/headers/index.astro +++ b/site/src/assets/examples/headers/index.astro @@ -72,7 +72,7 @@ export const extra_css = ['headers.css']
@@ -468,7 +468,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a @@ -503,7 +503,7 @@ Navbar themes are easier than ever thanks to Bootstrap’s combination of Sass a @@ -645,7 +645,7 @@ With no `.navbar-brand` shown (hidden inside the drawer): @@ -673,7 +673,7 @@ With a brand name shown on the left and toggler on the right: @@ -701,7 +701,7 @@ With a toggler on the left and brand name on the right: diff --git a/site/src/content/docs/components/spinner.mdx b/site/src/content/docs/components/spinner.mdx index 5077b977e66d..1c1bbd8db067 100644 --- a/site/src/content/docs/components/spinner.mdx +++ b/site/src/content/docs/components/spinner.mdx @@ -82,7 +82,7 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex #### Floats - + diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 740629ff5d00..8fa7d45c3517 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/site/src/content/docs/content/reboot.mdx @@ -127,7 +127,7 @@ The `
` element has been simplified. Similar to browser defaults, `
`s are -
+
diff --git a/site/src/content/docs/getting-started/accessibility.mdx b/site/src/content/docs/getting-started/accessibility.mdx index 4c2351c2f61b..a8dfe7722cc1 100644 --- a/site/src/content/docs/getting-started/accessibility.mdx +++ b/site/src/content/docs/getting-started/accessibility.mdx @@ -29,7 +29,7 @@ Some combinations of colors that currently make up Bootstrap’s default palette Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users. ```html -

+

This action is not reversible

diff --git a/site/src/content/docs/layout/columns.mdx b/site/src/content/docs/layout/columns.mdx index e32578a7af5b..e1f755a6820c 100644 --- a/site/src/content/docs/layout/columns.mdx +++ b/site/src/content/docs/layout/columns.mdx @@ -311,7 +311,7 @@ The classes can be used together with utilities to create responsive floated ima

- A paragraph of placeholder text. We’re using it here to show the use of the clearfix class. We’re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. + A paragraph of placeholder text. We’re using it here to show the use of the d-flow-root utility. We’re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

diff --git a/site/src/content/docs/utilities/object-fit.mdx b/site/src/content/docs/utilities/object-fit.mdx index 0b698960bb11..48658b19d567 100644 --- a/site/src/content/docs/utilities/object-fit.mdx +++ b/site/src/content/docs/utilities/object-fit.mdx @@ -30,17 +30,17 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m ## Responsive -Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need. +Responsive variations also exist for each `object-fit` value using the format `.{breakpoint}:object-fit-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `2xl`. Classes can be combined for various effects as you need. - - - - -`} /> + + + + +`} /> ## Video -The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `

{example.description}

{version} - {isCurrentVersion && Latest} - {isAlpha && Alpha} + {isCurrentVersion && Latest} + {isAlpha && Alpha} ) })}