A beginner's guide to getting started
Sep 2, 2026 in Strength
Colored link helpers tint a link with a theme colour, including hover and focus states, while the link opacity, offset and underline helpers fine-tune how the text and its underline look. Combine them for footers, inline copy, navigation and table actions.
1All link colours
link-* classes for every theme colour, plus link-body-emphasis for high contrast text.
<div class="d-flex flex-wrap gap-3">
<a href="#" class="link-primary">Primary link</a><a href="#" class="link-secondary">Secondary link</a><a href="#" class="link-success">Success link</a><a href="#" class="link-danger">Danger link</a><a href="#" class="link-warning">Warning link</a><a href="#" class="link-info">Info link</a><a href="#" class="link-light bg-dark px-1 rounded">Light link</a><a href="#" class="link-dark">Dark link</a><a href="#" class="link-body-emphasis">Body emphasis link</a>
</div>2Inline links in copy
Links inside a paragraph in the primary colour with an offset, softened underline.
Our recovery spa has a sauna, cold plunge and massage rooms. Read the setup guide or browse the recovery section.
<p class="mb-0">Our recovery spa has a sauna, cold plunge and massage rooms. Read the <a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">setup guide</a> or browse the <a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">recovery</a> section.</p>3Footer columns
Muted footer links with link-secondary that turn darker with link-body-emphasis on the heading.
<div class="row g-3 small">
<div class="col-6 col-md-3">
<a href="#" class="link-body-emphasis fw-semibold text-decoration-none d-block mb-2">Product</a> <a href="#" class="link-secondary d-block">Features</a><a href="#" class="link-secondary d-block">Pricing</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="link-body-emphasis fw-semibold text-decoration-none d-block mb-2">Company</a> <a href="#" class="link-secondary d-block">About</a><a href="#" class="link-secondary d-block">Jobs</a>
</div>
</div>4Sidebar navigation
link-body-emphasis for menu items and link-primary for the current page.
<nav aria-label="Account">
<ul class="list-unstyled mb-0 vstack gap-2">
<li><a href="#" class="link-primary fw-semibold" aria-current="page" style="text-decoration:none"><i class="bi bi-speedometer2" aria-hidden="true"></i> Dashboard</a></li>
<li><a href="#" class="link-body-emphasis" style="text-decoration:none"><i class="bi bi-receipt" aria-hidden="true"></i> Orders</a></li>
<li><a href="#" class="link-body-emphasis" style="text-decoration:none"><i class="bi bi-people-fill" aria-hidden="true"></i> Customers</a></li>
<li><a href="#" class="link-body-emphasis" style="text-decoration:none"><i class="bi bi-gear-fill" aria-hidden="true"></i> Settings</a></li>
</ul>
</nav>5Danger zone link
link-danger marks destructive actions in a settings panel.
<div class="border border-danger-subtle rounded p-3">
<h3 class="h6">Danger zone</h3>
<p class="small mb-2">Closing your account removes all Rallyova Craft data after 30 days.</p>
<a href="#" class="link-danger link-offset-1 fw-semibold"><i class="bi bi-trash-fill" aria-hidden="true"></i> Close account</a>
</div>6Link opacity scale
link-opacity-10 to link-opacity-100 fade the link colour.
<figure class="mb-0">
<div inert>
<div class="vstack gap-1">
<a class="link-opacity-10" href="#">Link opacity 10</a><a class="link-opacity-25" href="#">Link opacity 25</a><a class="link-opacity-50" href="#">Link opacity 50</a><a class="link-opacity-75" href="#">Link opacity 75</a><a class="link-opacity-100" href="#">Link opacity 100</a>
</div>
</div>
<figcaption class="small text-body-secondary mt-2 mb-0">Below 100 the link text no longer reaches 4.5:1 - use the faded steps for hover states and decoration, not for links people must read.</figcaption>
</figure>7Tag cloud
Popular tags larger in the brand colour, less used tags smaller in grey; the underline shows on hover.
<div class="d-flex flex-wrap gap-3 align-items-baseline">
<a href="#" class="fs-4 link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#design</a><a href="#" class="fs-6 link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#insights</a><a href="#" class="fs-5 link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#guide</a><a href="#" class="small link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#update</a><a href="#" class="fs-5 link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#news</a><a href="#" class="fs-6 link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#community</a>
</div>8Hover reveals the underline
link-underline-opacity-0 hides the underline until link-underline-opacity-75-hover shows it.
<p class="mb-0"> <a href="#" class="link-dark link-underline-dark link-underline-opacity-0 link-underline-opacity-75-hover">Five things we learned this year</a> · <a href="#" class="link-success link-underline-success link-underline-opacity-0 link-underline-opacity-75-hover">How to stay motivated through winter</a> </p>9Underline offsets
link-offset-1 to 3 move the underline away from the text; the -hover variant animates it.
<div class="vstack gap-2">
<a class="link-offset-1" href="#">Underline offset 1</a><a class="link-offset-2" href="#">Underline offset 2</a><a class="link-offset-3" href="#">Underline offset 3</a><a class="link-offset-1 link-offset-3-hover link-underline link-underline-opacity-50" href="#">Offset grows on hover</a>
</div>10Coloured underlines
Neutral text with a theme coloured underline using link-underline-*.
<div class="d-flex flex-wrap gap-3">
<a href="#" class="link-body-emphasis link-offset-2 link-underline-primary">Primary underline</a><a href="#" class="link-body-emphasis link-offset-2 link-underline-success">Success underline</a><a href="#" class="link-body-emphasis link-offset-2 link-underline-warning">Warning underline</a><a href="#" class="link-body-emphasis link-offset-2 link-underline-danger">Danger underline</a>
</div>11Table row actions
Edit and delete links coloured by intent in the last column.
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Date</th>
<th scope="col" class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" class="link-body-emphasis fw-semibold text-decoration-none">#ORD-3616</a></td>
<td>Jun 15, 2026</td>
<td class="text-end text-nowrap"><a href="#" class="link-primary me-2">Edit</a><a href="#" class="link-danger">Delete</a></td>
</tr>
<tr>
<td><a href="#" class="link-body-emphasis fw-semibold text-decoration-none">#TX-7123</a></td>
<td>Sep 8, 2026</td>
<td class="text-end text-nowrap"><a href="#" class="link-primary me-2">Edit</a><a href="#" class="link-danger">Delete</a></td>
</tr>
<tr>
<td><a href="#" class="link-body-emphasis fw-semibold text-decoration-none">#INV-9761</a></td>
<td>Dec 4, 2025</td>
<td class="text-end text-nowrap"><a href="#" class="link-primary me-2">Edit</a><a href="#" class="link-danger">Delete</a></td>
</tr>
</tbody>
</table>
</div>12Post titles
Headline links in body colour that only underline on hover, with a secondary category link.
Our most popular classes this month
Apr 20, 2026 in Yoga
Five stretches for desk workers
Jul 13, 2026 in Strength
<div class="vstack gap-3">
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">A beginner's guide to getting started</a></h3>
<p class="small text-body-secondary mb-0">Sep 2, 2026 in <a href="#" class="link-secondary">Strength</a></p>
</article>
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">Our most popular classes this month</a></h3>
<p class="small text-body-secondary mb-0">Apr 20, 2026 in <a href="#" class="link-secondary">Yoga</a></p>
</article>
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">Five stretches for desk workers</a></h3>
<p class="small text-body-secondary mb-0">Jul 13, 2026 in <a href="#" class="link-secondary">Strength</a></p>
</article>
</div>13Contact list
Email and phone links with an icon and the info colour.
<ul class="list-unstyled vstack gap-2 mb-0">
<li><i class="bi bi-envelope-fill" aria-hidden="true"></i> <a href="mailto:hello@example.com" class="link-info link-offset-1">hello@example.com</a></li>
<li><i class="bi bi-telephone-fill" aria-hidden="true"></i> <a href="tel:+15550100" class="link-info link-offset-1">+1 (555) 606-4822</a></li>
<li><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> <a href="#" class="link-info link-offset-1">98 Market Square, Montreal</a></li>
</ul>14Links on dark backgrounds
link-light and link-warning stay readable on a dark panel marked data-ui-theme="dark" (status links then use their light shade).
<div class="text-bg-dark rounded p-3" data-ui-theme="dark">
<p class="mb-2">Clear prices, honest advice and no surprises along the way.</p>
<a href="#" class="link-light link-offset-2 me-3">Learn more</a> <a href="#" class="link-warning link-offset-2">Upgrade now</a>
</div>15Legal links
Small link-secondary links with faint underlines for the fine print.
By continuing you agree to the Terms of Service and Privacy Policy.
<p class="small text-body-secondary mb-0">By continuing you agree to the <a href="#" class="link-secondary link-underline-opacity-25">Terms of Service</a> and <a href="#" class="link-secondary link-underline-opacity-25">Privacy Policy</a>.</p>16Icon links
Icon-only links that brighten on hover with link-opacity-*-hover.
<div class="d-flex gap-3 fs-4">
<a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="Community chat"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></a><a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="Newsletter"><i class="bi bi-envelope-fill" aria-hidden="true"></i></a><a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="RSS feed"><i class="bi bi-rss-fill" aria-hidden="true"></i></a><a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="Photo stream"><i class="bi bi-camera-fill" aria-hidden="true"></i></a>
</div>17Notification with a link
A coloured link inside an alert-style message.
Kenji Duarte commented on Running your first 5K: an eight-week plan 16 hours ago.
<div class="alert alert-light border d-flex gap-2 mb-0">
<span class="text-primary"><i class="bi bi-chat-left-text-fill" aria-hidden="true"></i></span>
<div class="small">
Kenji Duarte commented on <a href="#" class="link-primary fw-semibold">Running your first 5K: an eight-week plan</a> 16 hours ago.
</div>
</div>18Previous and next text links
Article pagination with link-body-emphasis and an arrow.
<nav class="d-flex justify-content-between small" aria-label="Article pages">
<a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25">← How our coaches plan a new class</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 text-end">What to eat before a morning workout →</a>
</nav>19Status links
Each status filter uses its matching link colour.
<div class="d-flex flex-wrap gap-3 small">
<a href="#" class="link-success">Completed (6)</a> <a href="#" class="link-warning">In review (14)</a> <a href="#" class="link-danger">Overdue (4)</a> <a href="#" class="link-secondary">Archived (62)</a>
</div>20Breadcrumb with coloured links
link-secondary breadcrumb links leading to the current page.
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">Home</a></li>
<li class="breadcrumb-item"><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">HIIT</a></li>
<li class="breadcrumb-item active" aria-current="page">Spin class pack</li>
</ol>
</nav>