A beginner's guide to getting started
Jan 1, 2026 in Drinks
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="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 sommelier has paired each dish with wines from small family vineyards. Read the setup guide or browse the mains section.
<p class="mb-0">Our sommelier has paired each dish with wines from small family vineyards. 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">mains</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" 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-subtle rounded p-3">
<h3 class="h6">Danger zone</h3>
<p class="small mb-2">Closing your account removes all Zest data after 30 days.</p>
<a href="#" class="link-danger link-offset-1 fw-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.
<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">#insights</a><a href="#" class="fs-6 link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#tutorial</a><a href="#" class="fs-5 link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#news</a><a href="#" class="small link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">#tips</a><a href="#" class="fs-5 link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#release</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">Meet the farmers behind our menu</a> · <a href="#" class="link-success link-underline-success link-underline-opacity-0 link-underline-opacity-75-hover">The story of our wood-fired oven</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-3321</a></td>
<td>Oct 27, 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>
<tr>
<td><a href="#" class="link-body-emphasis fw-semibold text-decoration-none">#INV-8848</a></td>
<td>Dec 24, 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>
<tr>
<td><a href="#" class="link-body-emphasis fw-semibold text-decoration-none">#ORD-4789</a></td>
<td>Jul 17, 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>
</tbody>
</table>
</div>12Post titles
Headline links in body colour that only underline on hover, with a secondary category link.
Our chocolate tart, step by step
Apr 30, 2026 in Mains
The small habits that make a big difference
Nov 8, 2025 in Specials
<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">Jan 1, 2026 in <a href="#" class="link-secondary">Drinks</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 chocolate tart, step by step</a></h3>
<p class="small text-body-secondary mb-0">Apr 30, 2026 in <a href="#" class="link-secondary">Mains</a></p>
</article>
<article>
<h3 class="h6 mb-1"><a href="#" class="link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover">The small habits that make a big difference</a></h3>
<p class="small text-body-secondary mb-0">Nov 8, 2025 in <a href="#" class="link-secondary">Specials</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) 982-4953</a></li>
<li><i class="bi bi-geo-alt" aria-hidden="true"></i> <a href="#" class="link-info link-offset-1">139 Lakeview Terrace, Austin</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">We listen first, then build a plan around what you actually need.</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" 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.
Ruby Okafor commented on What our guests asked us most 50 min ago.
<div class="alert alert-light border d-flex gap-2 mb-0">
<span class="text-primary"><i class="bi bi-chat-left-text" aria-hidden="true"></i></span>
<div class="small">
Ruby Okafor commented on <a href="#" class="link-primary fw-semibold">What our guests asked us most</a> 50 min 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">← Our chef's guide to seasonal autumn produce</a> <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 text-end">Looking back at a busy season →</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 (43)</a> <a href="#" class="link-warning">In review (14)</a> <a href="#" class="link-danger">Overdue (2)</a> <a href="#" class="link-secondary">Archived (82)</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">Starters</a></li>
<li class="breadcrumb-item active" aria-current="page">Seasonal soup</li>
</ol>
</nav>