Skip to content

Docs: change remaining deprecated .link-body-emphasis usages #42573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
julien-deramond merged 1 commit into from
Jun 30, 2026
Merged

Docs: change remaining deprecated .link-body-emphasis usages #42573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 18 additions & 18 deletions site/src/assets/examples/blog/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,18 @@ import Placeholder from "@shortcodes/Placeholder.astro"

<div class="nav-scroller py-1 mb-3 border-bottom">
<nav class="nav nav-underline justify-content-between">
<a class="nav-item nav-link link-body-emphasis active" href="#">World</a>
<a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
<a class="nav-item nav-link link-body-emphasis" href="#">Travel</a>
<a class="nav-item nav-link theme-inverse active" href="#">World</a>
<a class="nav-item nav-link theme-inverse" href="#">U.S.</a>
<a class="nav-item nav-link theme-inverse" href="#">Technology</a>
<a class="nav-item nav-link theme-inverse" href="#">Design</a>
<a class="nav-item nav-link theme-inverse" href="#">Culture</a>
<a class="nav-item nav-link theme-inverse" href="#">Business</a>
<a class="nav-item nav-link theme-inverse" href="#">Politics</a>
<a class="nav-item nav-link theme-inverse" href="#">Opinion</a>
<a class="nav-item nav-link theme-inverse" href="#">Science</a>
<a class="nav-item nav-link theme-inverse" href="#">Health</a>
<a class="nav-item nav-link theme-inverse" href="#">Style</a>
<a class="nav-item nav-link theme-inverse" href="#">Travel</a>
</nav>
</div>
</div>
Expand Down Expand Up @@ -106,7 +106,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</h3>

<article class="blog-post">
<h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
<h2 class="display-5 fg-emphasis-inverse mb-1">Sample blog post</h2>

@julien-deramond julien-deramond Jun 26, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For these titles, since they're not links, I rather used the .fg-* utility.

<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>

<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
Expand Down Expand Up @@ -160,7 +160,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</article>

<article class="blog-post">
<h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
<h2 class="display-5 fg-emphasis-inverse mb-1">Another blog post</h2>
<p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>

<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
Expand Down Expand Up @@ -208,7 +208,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</article>

<article class="blog-post">
<h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
<h2 class="display-5 fg-emphasis-inverse mb-1">New feature</h2>
<p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>

<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
Expand Down Expand Up @@ -238,7 +238,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<h4 class="fst-italic">Recent posts</h4>
<ul class="list-unstyled">
<li>
<a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
<a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 theme-inverse text-decoration-none border-top" href="#">
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
<div class="lg:col-8">
<h6 class="mb-0">Example blog post title</h6>
Expand All @@ -247,7 +247,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</a>
</li>
<li>
<a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
<a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 theme-inverse text-decoration-none border-top" href="#">
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
<div class="lg:col-8">
<h6 class="mb-0">This is another blog post title</h6>
Expand All @@ -256,7 +256,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</a>
</li>
<li>
<a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 link-body-emphasis text-decoration-none border-top" href="#">
<a class="d-flex flex-column lg:flex-row gap-3 align-items-start lg:align-items-center py-3 theme-inverse text-decoration-none border-top" href="#">
<Placeholder width="100%" height="96" background="#777" color="#777" text={false} title={false} />
<div class="lg:col-8">
<h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
Expand Down
12 changes: 6 additions & 6 deletions site/src/assets/examples/breadcrumbs/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,13 @@ export const extra_css = ['breadcrumbs.css']
<nav aria-label="breadcrumb">
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis" href="#">
<a class="theme-inverse" href="#">
<svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
<a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Data
Expand All @@ -46,13 +46,13 @@ export const extra_css = ['breadcrumbs.css']
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis" href="#">
<a class="theme-inverse" href="#">
<svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span>
</a>
</li>
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
<a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Data
Expand All @@ -67,13 +67,13 @@ export const extra_css = ['breadcrumbs.css']
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
<a class="theme-inverse fw-semibold text-decoration-none" href="#">
<svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
Home
</a>
</li>
<li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#">Library</a>
<a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Data
Expand Down
8 changes: 4 additions & 4 deletions site/src/assets/examples/footers/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const title = 'Footers'
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="md:col-4 mb-0 fg-2">&copy; {new Date().getFullYear()} Company, Inc</p>

<a href="/" class="md:col-4 d-flex align-items-center justify-content-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<a href="/" class="md:col-4 d-flex align-items-center justify-content-center mb-3 md:mb-0 md:me-auto theme-inverse text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>

Expand Down Expand Up @@ -71,7 +71,7 @@ export const title = 'Footers'
<div class="container">
<footer class="row row-cols-1 sm:row-cols-2 md:row-cols-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<a href="/" class="d-flex align-items-center mb-3 theme-inverse text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
<p class="fg-2">&copy; {new Date().getFullYear()}</p>
Expand Down Expand Up @@ -171,8 +171,8 @@ export const title = 'Footers'
<div class="d-flex flex-column sm:flex-row justify-content-between py-4 my-4 border-top">
<p>&copy; {new Date().getFullYear()} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#facebook"/></svg></a></li>
<li class="ms-3"><a class="theme-inverse" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="theme-inverse" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use href="#facebook"/></svg></a></li>
</ul>
</div>
</footer>
Expand Down
34 changes: 17 additions & 17 deletions site/src/assets/examples/headers/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const extra_css = ['headers.css']

<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto link-body-emphasis text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto theme-inverse text-decoration-none">
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
<span class="fs-xl">Simple header</span>
</a>
Expand Down Expand Up @@ -66,7 +66,7 @@ export const extra_css = ['headers.css']
<div class="container">
<header class="d-flex flex-wrap align-items-center justify-content-center md:justify-content-between py-3 mb-4 border-bottom">
<div class="md:col-3 mb-2 md:mb-0">
<a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
<a href="/" class="d-inline-flex theme-inverse text-decoration-none">
<svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
</a>
</div>
Expand Down Expand Up @@ -120,23 +120,23 @@ export const extra_css = ['headers.css']
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
<a href="/" class="d-flex align-items-center mb-2 lg:mb-0 link-body-emphasis text-decoration-none">
<a href="/" class="d-flex align-items-center mb-2 lg:mb-0 theme-inverse text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
</a>

<ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
<li><a href="#" class="nav-link px-2 theme-secondary">Overview</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li>
<li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li>
<li><a href="#" class="nav-link px-2 theme-inverse">Inventory</a></li>
<li><a href="#" class="nav-link px-2 theme-inverse">Customers</a></li>
<li><a href="#" class="nav-link px-2 theme-inverse">Products</a></li>
</ul>

<form class="col-12 lg:col-auto mb-3 lg:mb-0 lg:me-3" role="search">
<input type="search" class="form-control" placeholder="Search..." aria-label="Search">
</form>

<div class="text-end">
<a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
<a class="d-block theme-inverse text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<div class="menu">
Expand All @@ -156,7 +156,7 @@ export const extra_css = ['headers.css']
<header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div>
<a class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false" aria-label="Bootstrap menu">
<a class="d-flex align-items-center lg:col-4 mb-2 lg:mb-0 theme-inverse text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false" aria-label="Bootstrap menu">
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
</a>
<div class="menu shadow">
Expand All @@ -176,7 +176,7 @@ export const extra_css = ['headers.css']
</form>

<div class="flex-shrink-0">
<a class="d-block link-body-emphasis text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
<a class="d-block theme-inverse text-decoration-none" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
</a>
<div class="menu shadow">
Expand Down Expand Up @@ -207,21 +207,21 @@ export const extra_css = ['headers.css']
<nav class="py-2 bg-body-tertiary border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li>
<li class="nav-item"><a href="#" class="nav-link theme-inverse px-2 active" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">About</a></li>
</ul>
<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li>
<li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li>
<li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Login</a></li>
<li class="nav-item"><a href="#" class="nav-link theme-inverse px-2">Sign up</a></li>
</ul>
</div>
</nav>
<header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 lg:mb-0 lg:me-auto link-body-emphasis text-decoration-none">
<a href="/" class="d-flex align-items-center mb-3 lg:mb-0 lg:me-auto theme-inverse text-decoration-none">
<svg class="bi me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
<span class="fs-xl">Double header</span>
</a>
Expand Down
10 changes: 5 additions & 5 deletions site/src/assets/examples/pricing/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@ export const extra_css = ['pricing.css']
<div class="container py-3">
<header>
<div class="d-flex flex-column md:flex-row align-items-center pb-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center link-body-emphasis text-decoration-none">
<a href="/" class="d-flex align-items-center theme-inverse text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
<span class="fs-xl">Pricing example</span>
</a>

<nav class="d-inline-flex mt-2 md:mt-0 md:ms-auto">
<a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Features</a>
<a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Enterprise</a>
<a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Support</a>
<a class="py-2 link-body-emphasis text-decoration-none" href="#">Pricing</a>
<a class="me-3 py-2 theme-inverse text-decoration-none" href="#">Features</a>
<a class="me-3 py-2 theme-inverse text-decoration-none" href="#">Enterprise</a>
<a class="me-3 py-2 theme-inverse text-decoration-none" href="#">Support</a>
<a class="py-2 theme-inverse text-decoration-none" href="#">Pricing</a>
</nav>
</div>

Expand Down
Loading