v6: examples - Use new utility classes in examples

[coliff]

Description

Linked to #42487

Update multiple example pages to new utility naming and tokens for consistency. Replaced legacy text-/display-/bg-* classes with fg-/fs- and bg-subtle-* variants, adjusted spacing and radii (p-5 → p-9, rounded-3 → rounded-5), removed redundant text-small classes, and applied small/fg-white tweaks where appropriate. Files changed: checkout, headers, jumbotron, pricing, product, and sidebars examples to align markup with the updated design system.

FYI: text-small was used quite a bit in markup but it had no corresponding CSS class so it didn't actually appear any different so I removed the class on all bu the the checkout where in my opinion the copyright info makes a bit more sense to be smaller.

Motivation & Context

Make them look nicer. :-)

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-42455--twbs-bootstrap.netlify.app/docs/6.0/examples/

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates several Astro example templates to align with updated utility class naming and spacing/typography tokens.

Changes:

• Swaps background/foreground, spacing, rounding, and font-size utility classes across examples.
• Removes text-small usage from menus/navs/footer lists in multiple examples.
• Tweaks specific component styling (e.g., jumbotron dark panel theme + padding/rounding changes).

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
site/src/assets/examples/sidebars/index.astro	Removes text-small from dropdown menus (keeps menu + shadow).
site/src/assets/examples/product/index.astro	Updates hero/section styling to new spacing/color/typography utilities; removes text-small from footer lists.
site/src/assets/examples/pricing/index.astro	Removes text-small from footer lists.
site/src/assets/examples/jumbotron/index.astro	Updates header link color utilities; refreshes jumbotron spacing/rounding and dark panel theming.
site/src/assets/examples/headers/index.astro	Removes text-small from menus and a nav list; keeps shadows/structure.
site/src/assets/examples/checkout/index.astro	Replaces text-small with small on footer.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[julien-deramond]

.text-small was present in the headers.css, and the usage in other examples might have been a copy-paste error. I'll backport the fix in v5 (by keeping .text-small where it actually does something 😄).

I don't mind not applying it all, so I removed the CSS rule from headers.css via e2f4ecb

[julien-deramond]

Thanks a lot for the changes, @coliff! The rendering is slightly different from v5, but the utilities are different as well and don’t necessarily provide a 1:1 feature match.

That said, the v6 examples for Jumbotron and Product look much better than what we currently have in v6-dev, so I think we can move forward with these changes rather than focus too much on the small details. Also, this helps address the issues identified in #42487, which is great :)

[coliff]

thanks for the feedback and merging. I'll try and get the remaining ones done by tomorrow!

[coliff]

The rendering is slightly different from v5, but the utilities are different as well and don’t necessarily provide a 1:1 feature match.

The main issue I've faced is the lack of bg-dark (so have to use bg-black instead). I used to use that bg-dark utility a lot and will miss it if it's not re-introduced to v6...

[julien-deramond]

The main issue I've faced is the lack of bg-dark (so have to use bg-black instead). I used to use that bg-dark utility a lot and will miss it if it's not re-introduced to v6...

Instead of using .bg-black and .fg-white, it's possible to use contextual dark mode with data-bs-theme="dark" along with the appropriate background/foreground utilities. This provides access to a wider range of theme variants rather than being limited to pure black and white.