A guide to education fund
Aug 21, 2026 in Animals
Colored Links
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="flex flex-wrap gap-4">
<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-md">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.
This modern plan turns projects moving forward in just a few clicks. Read the setup guide or browse the education section.
<p class="mb-0">This modern plan turns projects moving forward in just a few clicks. 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">education</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 font-semibold no-underline block mb-2">Product</a> <a href="#" class="link-secondary block">Features</a><a href="#" class="link-secondary block">Pricing</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="link-body-emphasis font-semibold no-underline block mb-2">Company</a> <a href="#" class="link-secondary block">About</a><a href="#" class="link-secondary 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 font-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" aria-hidden="true"></i> Customers</a></li>
<li><a href="#" class="link-body-emphasis" style="text-decoration:none"><i class="bi bi-gear" 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/30 rounded-md p-4">
<h3 class="h6">Danger zone</h3>
<p class="small mb-2">Closing your account removes all Brand name 11 data after 30 days.</p>
<a href="#" class="link-danger link-offset-1 font-semibold"><i class="bi bi-trash" aria-hidden="true"></i> Close account</a>
</div>6Link opacity scale
link-opacity-10 to link-opacity-100 fade the link colour.
<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>7Tag cloud
Popular tags shown stronger and less used tags faded with link opacity; all fully visible on hover.
<div class="flex flex-wrap gap-4 items-baseline">
<a href="#" class="text-xl link-primary link-opacity-100 link-opacity-100-hover no-underline">#guide</a><a href="#" class="text-base link-primary link-opacity-50 link-opacity-100-hover no-underline">#community</a><a href="#" class="text-lg link-primary link-opacity-75 link-opacity-100-hover no-underline">#update</a><a href="#" class="small link-primary link-opacity-25 link-opacity-100-hover no-underline">#tips</a><a href="#" class="text-lg link-primary link-opacity-100 link-opacity-100-hover no-underline">#insights</a><a href="#" class="text-base link-primary link-opacity-50 link-opacity-100-hover no-underline">#design</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">Simple ways to improve your team</a> · <a href="#" class="link-success link-underline-success link-underline-opacity-0 link-underline-opacity-75-hover">Routine notes for donors</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="flex flex-wrap gap-4">
<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 font-semibold no-underline">#TX-5968</a></td>
<td>Sep 27, 2026</td>
<td class="text-end whitespace-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 font-semibold no-underline">#PO-1117</a></td>
<td>Aug 25, 2026</td>
<td class="text-end whitespace-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 font-semibold no-underline">#PO-8046</a></td>
<td>Aug 4, 2026</td>
<td class="text-end whitespace-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.
<div class="vstack gap-4">
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">A guide to education fund</a></h3>
<p class="small text-muted mb-0">Aug 21, 2026 in <a href="#" class="link-secondary">Animals</a></p>
</article>
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">Launch notes for donors</a></h3>
<p class="small text-muted mb-0">Dec 14, 2025 in <a href="#" class="link-secondary">Relief</a></p>
</article>
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">Inside the powerful idea</a></h3>
<p class="small text-muted mb-0">Mar 24, 2026 in <a href="#" class="link-secondary">Relief</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" 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" aria-hidden="true"></i> <a href="tel:+15550100" class="link-info link-offset-1">+1 (555) 598-8135</a></li>
<li><i class="bi bi-geo-alt" aria-hidden="true"></i> <a href="#" class="link-info link-offset-1">242 Orchard Close, Toronto</a></li>
</ul>14Links on dark backgrounds
link-light and link-warning stay readable on a dark panel.
Our disaster response shows you focused on what matters from the very first day.
Learn more Upgrade now<div class="text-bg-dark rounded-md p-4">
<p class="mb-2">Our disaster response shows you focused on what matters from the very first day.</p>
<a href="#" class="link-light link-offset-2 me-4">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-muted 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="flex gap-4 text-xl">
<a href="#" class="link-secondary link-opacity-75 link-opacity-100-hover" aria-label="Community chat"><i class="bi bi-chat-dots" 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" 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" 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" aria-hidden="true"></i></a>
</div>17Notification with a link
A coloured link inside an alert-style message.
Mia Ortega commented on 6 lessons from our experience 53 min ago.
<div class="alert alert-light border flex gap-2 mb-0">
<span class="text-primary"><i class="bi bi-chat-left-text" aria-hidden="true"></i></span>
<div class="small">
Mia Ortega commented on <a href="#" class="link-primary font-semibold">6 lessons from our experience</a> 53 min ago.
</div>
</div>18Previous and next text links
Article pagination with link-body-emphasis and an arrow.
<nav class="flex justify-between small" aria-label="Article pages">
<a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25">← How we rebuilt our team</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 text-end">What's new in environment →</a>
</nav>19Status links
Each status filter uses its matching link colour.
<div class="flex flex-wrap gap-4 small">
<a href="#" class="link-success">Completed (41)</a> <a href="#" class="link-warning">In review (3)</a> <a href="#" class="link-danger">Overdue (6)</a> <a href="#" class="link-secondary">Archived (48)</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">Animals</a></li>
<li class="breadcrumb-item active" aria-current="page">Shelter support</li>
</ol>
</nav>