v6: docs: fix typos, examples, and utility class docs#42430
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Docs-focused PR to align examples and guidance with Bootstrap 6’s updated theming tokens, responsive class prefixing, and to clean up minor typos/accessibility issues.
Changes:
- Updated utility/component examples to use new
fg-*/fg-contrast-*and responsive.{breakpoint}:*class patterns. - Corrected typos/grammar and fixed a malformed attribute spacing in a dialog example.
- Improved example accessibility by adding alt text to the Bootstrap logo image.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| site/src/content/docs/utilities/background.mdx | Updates background utility examples to new foreground utility classes. |
| site/src/content/docs/helpers/stretched-link.mdx | Fixes placeholder title text typo in example markup. |
| site/src/content/docs/guides/migration.mdx | Fixes “it’s” → “its” grammar in breakpoint migration notes. |
| site/src/content/docs/getting-started/javascript.mdx | Updates JS-required components list to include Dialog (and removes a couple prior entries). |
| site/src/content/docs/getting-started/approach.mdx | Fixes wording and updates selector/theming guidance and a docsref link. |
| site/src/content/docs/forms/layout.mdx | Updates horizontal form guidance to new responsive class syntax. |
| site/src/content/docs/components/navbar.mdx | Updates navbar expand class guidance to new responsive prefix syntax. |
| site/src/content/docs/components/dialog.mdx | Fixes missing whitespace in button example attributes. |
| site/src/assets/examples/sign-in/index.astro | Adds alt text to the Bootstrap logo in the sign-in example. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 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. |
There was a problem hiding this comment.
This paragraph probably needs an update because buttons now don't need a base class for shared property-value pairs so the first sentence in the diff above is not correct for buttons.
|
Was this a bad rebase? Seeing some dependabot and @julien-deramond commits? |
I don't want to mess with the branch, not knowing exactly what's inside and what's the status, but locally, if I do: I got And only 3 commits authored by Christian in the end. So I'd say it'd just need to be rebased again after the recent changes in v6-dev, yeah. |
71371c4 to
8ffa0be
Compare
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.
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`.
8ffa0be to
4cff922
Compare
|
sorry 'bout that. I think it's all good now. |
Description
Minor documentation fixes across multiple site files:
.{breakpoint}:navbar-expand)..{breakpoint}:col-*usage..btn-solidand.theme-primary).fg-contrast-{name}/fg-{name}classes instead of previouscolor-*naming.Motivation & Context
These changes improve clarity, accessibility, and align docs with updated class naming conventions.
Type of changes
Checklist
npm run lint)Live previews
Related issues