Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions site/src/content/docs/guides/migration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -391,6 +391,21 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
- **Spacing and border utilities now use CSS logical properties.** `margin-top` → `margin-block-start`, `margin-right` → `margin-inline-end`, `padding-left` → `padding-inline-start`, `border-right` → `border-inline-end`, etc. Class names (`.mt-*`, `.me-*`, `.ps-*`, `.border-end`) remain the same, but the underlying CSS properties are now logical, improving RTL and writing-mode support.
- **Text wrap additions.** Added `.text-balance` and `.text-pretty` values to the text-wrap utility.
- **Color utility renames.** `.text-*` color utilities have been replaced by `.fg-*` (foreground) utilities. New `.fg-emphasis-*` and `.fg-contrast-*` variants. Background utilities now include `.bg-subtle-*` and `.bg-muted-*` in addition to `.bg-*`. Added `.fg-bg` and `.bg-fg` cross-reference utilities; removed `.fg-inherit` and `.bg-inherit`. Renamed `.bg-opacity-*` to `.bg-*`. Renamed `.text-reset` to `.fg-reset`.
- **Link utilities are now part of text decoration utilities.** The v5 `link-*` utility family has been replaced by `underline-*` utilities documented under [Text decoration]([[docsref:/utilities/text-decoration]]). Update class names accordingly:

<BsTable>
| Category | Before (v5) | After (v6) |
|---|---|---|
| Link text opacity | `.link-opacity-*`, `.link-opacity-*-hover` | Removed (no dedicated `link-opacity-*` utility in v6) |
| Underline offset | `.link-offset-1`, `.link-offset-2`, `.link-offset-3` | `.underline-offset-1`, `.underline-offset-2`, `.underline-offset-3` |
| Underline color | `.link-underline-primary`, `.link-underline-secondary` | `.underline-primary`, `.underline-secondary` |
| Underline opacity | `.link-underline-opacity-*` | `.underline-*` (10-step scale from `10` to `100`) |
| Underline thickness | — | `.underline-thickness-1` through `.underline-thickness-5` |
| Hover variants | `.link-offset-3-hover`, `.link-underline-opacity-75-hover` | `.hover:underline-offset-3`, `.hover:underline-70` or `.hover:underline-80` |
</BsTable>

The helper `.link-underline` is no longer needed in v6.

- **Display utilities:** added `flow-root` and `contents` options.
- **Sizing utilities:**
- Renamed `.mh-*`/`.mw-*` to `.max-h-*`/`.max-w-*`
Expand Down
6 changes: 3 additions & 3 deletions site/src/layouts/partials/ExamplesMain.astro
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { getSlug } from '@libs/utils'
<div>
<h3 class="h5 mb-1">
<a
class="d-block link-offset-1"
class="d-block underline-offset-1"
href={`${getConfig().github_org}${example.url}/`}
target="_blank"
rel="noopener"
Expand All @@ -34,7 +34,7 @@ import { getSlug } from '@libs/utils'
<p class="fg-2">{example.description}</p>
<p>
<a
class="icon-link small theme-secondary link-offset-1"
class="icon-link small theme-secondary underline-offset-1"
href={`https://stackblitz.com/github/twbs${example.url}?file=${
example.indexPath ? example.indexPath : 'index.html'
}`}
Expand All @@ -56,7 +56,7 @@ import { getSlug } from '@libs/utils'
return (
<article class="sm:col-6 md:col-3 mb-3">
<a
class="d-block link-offset-1"
class="d-block underline-offset-1"
href={`/docs/${getConfig().docs_version}/examples/${getSlug(example.name)}/`}
>
<img
Expand Down