From: Christian Oliff Date: Fri, 22 May 2026 19:28:09 +0000 (+0900) Subject: v6: docs - Update utility class names in docs and examples (#42418) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=71a1c86725629a280661f0e7138ba40e75f9ea27;p=thirdparty%2Fbootstrap.git v6: docs - Update utility class names in docs and examples (#42418) 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. --- diff --git a/site/src/assets/examples/blog/index.astro b/site/src/assets/examples/blog/index.astro index 3456f51b78..0667ba0308 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 0aa029ba1d..8fa1d62951 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 609817634e..7cdfc80840 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 88c952ecea..0dba47145c 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 5077b977e6..1c1bbd8db0 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 740629ff5d..8fa7d45c35 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 4c2351c2f6..a8dfe7722c 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 e32578a7af..e1f755a682 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 0b698960bb..48658b19d5 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} ) })}