v6: docs: fix typos, examples, and utility class docs

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`.

Author: coliff

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'
 
 <main class="form-signin w-100 m-auto">
   <form>
-    <img class="mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="" width="72" height="57">
+    <img class="mb-4" src={getVersionedDocsPath('/assets/brand/bootstrap-logo.svg')} alt="Bootstrap" width="72" height="57">
     <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
 
     <div class="form-floating">

site/src/content/docs/components/dialog.mdx

@@ -71,7 +71,7 @@ To make a dialog dark, add `data-bs-theme="dark"` to the `<dialog>` element.
 
 When `backdrop` is set to `static`, the dialog will not close when clicking outside of it. Click the button below to try it.
 
-<Example code={`<button type="button" class="btn-solid theme-primary"data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static"><!-- [!code highlight] -->
+<Example code={`<button type="button" class="btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#staticBackdropDialog" data-bs-backdrop="static"><!-- [!code highlight] -->
     Open static backdrop dialog
   </button>
 

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.

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 `<label>`s as well so they’re vertically centered with their associated form controls.
+Create horizontal forms with the grid by adding the `.row` class to form groups and using `.{breakpoint}:col-*` classes (e.g. `.sm:col-2`) to specify the width of your labels and controls. Be sure to add `.col-form-label` to your `<label>`s as well so they’re vertically centered with their associated form controls.
 
 At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
 

site/src/content/docs/getting-started/approach.mdx

@@ -23,7 +23,7 @@ Sass is used for the following:
 - Manage repetitive snippets of code with mixins and functions.
 - Toggle global options like `$enable-smooth-scroll`, `$enable-reduced-motion`, etc.
 - Configure and generate component variants (theme colors, sizes, etc) through Sass maps, loops, and more.
-- Bulk-generate CSS variables for all every tint and shade of our colors.
+- Bulk-generate CSS variables for every tint and shade of our colors.
 - Manage component token lists (e.g., `$alert-tokens`) and apply them to specific classes.
 - Power the utilities API to customize and generate utility classes.
 
@@ -197,9 +197,9 @@ We use range media queries (`width >= 768px`, for example) to apply styles at a
 
 ### Classes
 
-Aside from [Reboot]([[docsref:content/reboot]]), we strive to use only classes as selectors. Where we can, we avoid type selectors and extraneous parent selectors for greater flexibility.
+Aside from [Reboot]([[docsref:/content/reboot]]), we strive to use only classes as selectors. Where we can, we avoid type selectors and extraneous parent selectors for greater flexibility.
 
-Components are typically built with a base class for shared property-value pairs. For example, `.btn` and `.btn-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use modifiers like `.btn-solid` to add more styles.
+Components are typically built with a base class for shared property-value pairs. For example, `.btn`, `.btn-solid`, and `.theme-primary`. We use `.btn` for all the common styles like `display`, `padding`, and `border-width`. We then use variant and theme modifiers like `.btn-solid.theme-primary` to add more styles.
 
 This reduces complexity, streamlines code, and makes for more scalable systems.
 

site/src/content/docs/getting-started/javascript.mdx

@@ -8,14 +8,13 @@ toc: true
 
 Curious which components explicitly require our JavaScript and Floating UI or Vanilla Calendar Pro?
 
-- Accordions for extending our Collapse plugin
 - Alerts for dismissing
 - Buttons for toggling states and checkbox/radio functionality
 - Carousel for all slide behaviors, controls, and indicators
 - Collapse for toggling visibility of content
 - Datepicker for date selection (also requires [Vanilla Calendar Pro](https://vanilla-calendar.pro/))
+- [Dialog]([[docsref:/components/dialog]]) for displaying, positioning, and scroll behavior
 - Menus for displaying and positioning (also requires [Floating UI](https://floating-ui.com/))
-- Modals for displaying, positioning, and scroll behavior
 - Navbar for extending our Collapse and Drawer plugins to implement responsive behaviors
 - [Nav]([[docsref:/components/nav]]) for navigation markup and styles; [Tab]([[docsref:/components/tab]]) plugin for toggling tab panes
 - Drawers for displaying, positioning, and scroll behavior

site/src/content/docs/guides/migration.mdx

@@ -61,10 +61,10 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
   - Removed `_variables.scss`, consolidating all variables into `_config.scss`
   - Added `_theme.scss` where we setup all our global theming for how colors are applied
 - **Updated lg, xl, and 2xl breakpoints and containers.**
-  - Increased the `lg` breakpoint from 992px to 1024px; it’s container remains the same at 960px.
-  - Increased the `xl` breakpoint from 1200px to 1280px, and it’s container from 1140px to 1200px.
+  - Increased the `lg` breakpoint from 992px to 1024px; its container remains the same at 960px.
+  - Increased the `xl` breakpoint from 1200px to 1280px, and its container from 1140px to 1200px.
   - Renamed `xxl` to `2xl` for better scaling with additional custom breakpoints
-  - Increased the `2xl` breakpoint from 1400px to 1536px, and it’s container from 1320px to 1440px.
+  - Increased the `2xl` breakpoint from 1400px to 1536px, and its container from 1320px to 1440px.
 - **Adopted modern CSS color functions.** All Sass color variables now use `oklch()` notation (e.g., `$blue: oklch(60% 0.24 240)`) and tint/shade scales are generated with `color-mix(in lab, ...)` in the compiled CSS. The v5 `$*-rgb` CSS custom properties and `rgba()` patterns have been removed. This requires browser support for `color-mix()` and `oklch()`.
 - **New theme token system with `.theme-*` classes.** Per-component color variant classes (like `.alert-primary`, `.badge.bg-primary`, `.btn-primary`) are replaced by a composable `.theme-{name}` pattern. Adding `.theme-primary` to a component sets `--theme-bg`, `--theme-fg`, `--theme-border`, `--theme-contrast`, and other semantic CSS custom properties that the component reads. This applies across buttons, badges, alerts, cards, accordions, and more.
 - **Responsive and state classes now use a prefix instead of an infix or suffix.** Class names follow the Tailwind-style `prefix:class` pattern (e.g., `md:d-none` instead of `d-md-none`, `hover:opacity-50` instead of `opacity-50-hover`). In HTML, use the unescaped colon: `class="md:d-none"`. This applies to utilities, grid, pseudo-state variants, and all responsive components.

site/src/content/docs/helpers/stretched-link.mdx

@@ -21,7 +21,7 @@ Multiple links and tap targets are not recommended with stretched links. However
 Most custom components do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the parent element.
 
 <Example code={`<div class="d-flex position-relative">
-    <Placeholder width="144" height="144" class="flex-shrink-0 me-3" text={false} title="Generic placeholder image22222" />
+    <Placeholder width="144" height="144" class="flex-shrink-0 me-3" text={false} title="Generic placeholder image" />
     <div>
       <h5 class="mt-0">Custom component with stretched link</h5>
       <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we’re using it here to give the component a bit of body and size.</p>

site/src/content/docs/utilities/background.mdx

@@ -31,9 +31,9 @@ For example, `.bg-primary` sets the `--bs-bg` variable to `var(--bs-primary-bg)`
 This approach allows us to also easily support translucency with our `.bg-{opacity}` utilities as we can use `color-mix()` with the CSS variable to generate the appropriate color. See the [opacity section](#opacity) for more details.
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} color-on-${themeColor.name}">.bg-${themeColor.name}</div>
-<div class="p-3 mb-2 bg-muted-${themeColor.name} color-${themeColor.name}">.bg-muted-${themeColor.name}</div>
-<div class="p-3 mb-2 bg-subtle-${themeColor.name} color-${themeColor.name}">.bg-subtle-${themeColor.name}</div>`),
+  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} fg-contrast-${themeColor.name}">.bg-${themeColor.name}</div>
+<div class="p-3 mb-2 bg-muted-${themeColor.name} fg-${themeColor.name}">.bg-muted-${themeColor.name}</div>
+<div class="p-3 mb-2 bg-subtle-${themeColor.name} fg-${themeColor.name}">.bg-subtle-${themeColor.name}</div>`),
   `<div class="p-3 mb-2 bg-body fg-body">.bg-body</div>
 <div class="p-3 mb-2 bg-1">.bg-1</div>
 <div class="p-3 mb-2 bg-2">.bg-2</div>
@@ -52,7 +52,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 <Example class="d-flex flex-column gap-2" code={[
   ...getData('theme-colors').map((themeColor) => `<div class="p-3 bg-${themeColor.name} bg-gradient fg-contrast-${themeColor.name}">.bg-${themeColor.name}.bg-gradient</div>`),
-  `<div class="p-3 bg-black bg-gradient fg-contrast">.bg-black.bg-gradient</div>`
+  `<div class="p-3 bg-black bg-gradient fg-white">.bg-black.bg-gradient</div>`
 ]} />
 
 ## Opacity

site/src/content/docs/utilities/gap.mdx

@@ -13,7 +13,7 @@ import { getData } from '@libs/data'
 
 ## Overview
 
-Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from `.25rem` to `3rem`. Use utilities like `.gap-3` and `.gap-5` to control the gap between all children:
+Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from `0` to `3rem` (`.gap-0` through `.gap-9`). Use utilities like `.gap-3` and `.gap-5` to control the gap between all children:
 
 <Example class="d-flex align-items-center justify-content-center gap-4 text-center" showMarkup={false} code={`
   <div class="d-flex gap-3 p-3 bd-pattern-diagonal rounded-3">
@@ -51,9 +51,13 @@ Where *size* is one of:
 - `0` - for classes that eliminate the `gap` by setting it to `0`
 - `1` - (by default) for classes that set the `gap` to `$spacer * .25`
 - `2` - (by default) for classes that set the `gap` to `$spacer * .5`
-- `3` - (by default) for classes that set the `gap` to `$spacer`
-- `4` - (by default) for classes that set the `gap` to `$spacer * 1.5`
-- `5` - (by default) for classes that set the `gap` to `$spacer * 3`
+- `3` - (by default) for classes that set the `gap` to `$spacer * .75`
+- `4` - (by default) for classes that set the `gap` to `$spacer`
+- `5` - (by default) for classes that set the `gap` to `$spacer * 1.25`
+- `6` - (by default) for classes that set the `gap` to `$spacer * 1.5`
+- `7` - (by default) for classes that set the `gap` to `$spacer * 2`
+- `8` - (by default) for classes that set the `gap` to `$spacer * 2.5`
+- `9` - (by default) for classes that set the `gap` to `$spacer * 3`
 
 (You can add more sizes by adding entries to the `$spacers` Sass map variable.)
 
@@ -154,23 +158,23 @@ All gap utilities are responsive and include all breakpoints.
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-5</code></li>
+    <li><code>.{breakpoint.abbr}gap-0</code> through <code>.{breakpoint.abbr}gap-9</code></li>
   )
 })}
 </ul>
 
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-5</code></li>
+    <li><code>.{breakpoint.abbr}row-gap-0</code> through <code>.{breakpoint.abbr}row-gap-9</code></li>
   )
 })}
 </ul>
 
 <ul>
 {getData('breakpoints').map((breakpoint) => {
   return (
-    <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-5</code></li>
+    <li><code>.{breakpoint.abbr}column-gap-0</code> through <code>.{breakpoint.abbr}column-gap-9</code></li>
   )
 })}
 </ul>