From 85054e107bf40923f05a39cd8aad42e83fc00d43 Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Sat, 23 May 2026 10:10:40 +0900 Subject: [PATCH] v6: docs: fix typos, examples, and utility class docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Minor documentation fixes across multiple site files: - examples/sign-in: add meaningful alt text for the logo image for accessibility. - components/dialog: add missing space in example button markup. - components/navbar: update navbar example to use new prefix-style responsive class (`.{breakpoint}:navbar-expand`). - forms/layout: update horizontal form docs to recommend `.{breakpoint}:col-*` usage. - getting-started/approach: fix grammar/typos, correct docsref path, and clarify component modifier/variant naming (mention `.btn-solid` and `.theme-primary`). - getting-started/javascript: adjust JS-required components list (add Dialog, remove Accordions/Modals lines). - guides/migration: fix possessive "its" typos in breakpoint/container notes. - helpers/stretched-link: correct placeholder title text. - utilities/background: update example to use `fg-contrast-{name}` / `fg-{name}` classes instead of previous `color-*` naming. These changes improve clarity, accessibility, and align docs with updated class naming conventions. v6: docs: fix typos, examples, and utility class docs text would always be white on black background Update example code for background gradient usage Update margin utilities docs for v6 spacers Docs updated to reflect the v6 spacing scale: sizes now range from 0 through 9 (`.m-0`–`.m-9`) and the multiplier values for sizes 3–9 were adjusted. Negative margin docs were changed to note that v6 only supports negative inline margins (`.ms--1`, `.me--2`) using `-1` and `-2` spacers and that the v5-style full negative utilities (e.g. `.mt-n1`) were removed. The responsive examples were updated to list `.{breakpoint}m-0` through `.{breakpoint}m-9` and `.{breakpoint}m-auto`. --- site/src/assets/examples/sign-in/index.astro | 2 +- site/src/content/docs/components/dialog.mdx | 2 +- site/src/content/docs/components/navbar.mdx | 2 +- site/src/content/docs/forms/layout.mdx | 2 +- .../content/docs/getting-started/approach.mdx | 6 +-- .../docs/getting-started/javascript.mdx | 3 +- site/src/content/docs/guides/migration.mdx | 6 +-- .../content/docs/helpers/stretched-link.mdx | 2 +- .../src/content/docs/utilities/background.mdx | 8 ++-- site/src/content/docs/utilities/gap.mdx | 18 +++++---- site/src/content/docs/utilities/margin.mdx | 27 +++++++------ site/src/content/docs/utilities/padding.mdx | 38 ++++++++++--------- 12 files changed, 63 insertions(+), 53 deletions(-) diff --git a/site/src/assets/examples/sign-in/index.astro b/site/src/assets/examples/sign-in/index.astro index 5b937c184bf9..b6bc65a32c23 100644 --- a/site/src/assets/examples/sign-in/index.astro +++ b/site/src/assets/examples/sign-in/index.astro @@ -8,7 +8,7 @@ export const body_class = 'd-flex align-items-center py-4 bg-body-tertiary'
- + Bootstrap

Please sign in

diff --git a/site/src/content/docs/components/dialog.mdx b/site/src/content/docs/components/dialog.mdx index bfec3a9b2e0b..2bb96b3f48fd 100644 --- a/site/src/content/docs/components/dialog.mdx +++ b/site/src/content/docs/components/dialog.mdx @@ -71,7 +71,7 @@ To make a dialog dark, add `data-bs-theme="dark"` to the `` element. When `backdrop` is set to `static`, the dialog will not close when clicking outside of it. Click the button below to try it. - + Open static backdrop dialog diff --git a/site/src/content/docs/components/navbar.mdx b/site/src/content/docs/components/navbar.mdx index ca49695322fe..50bf3b858a51 100644 --- a/site/src/content/docs/components/navbar.mdx +++ b/site/src/content/docs/components/navbar.mdx @@ -68,7 +68,7 @@ Here’s a navbar that includes most supported sub-components and a responsive r Here’s what you need to know before getting started with the navbar: -- Navbars require a wrapping `.navbar` with `.navbar-expand-{breakpoint}` for responsive collapsing and [color scheme](#color-schemes) classes. +- Navbars require a wrapping `.navbar` with `.{breakpoint}:navbar-expand` (e.g. `.md:navbar-expand`) for responsive collapsing and [color scheme](#color-schemes) classes. - Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways. - Use our [margin]([[docsref:/utilities/margin]]), [padding]([[docsref:/utilities/padding]]), and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars. - Navbars are responsive by default using our **drawer component**. On mobile, navigation links slide in from the side as a drawer. diff --git a/site/src/content/docs/forms/layout.mdx b/site/src/content/docs/forms/layout.mdx index 8265e1b52c46..e5521bca59ba 100644 --- a/site/src/content/docs/forms/layout.mdx +++ b/site/src/content/docs/forms/layout.mdx @@ -109,7 +109,7 @@ More complex layouts can also be created with the grid system. ## Horizontal form -Create horizontal forms with the grid by adding the `.row` class to form groups and using the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `