Link
Link utilities style anchors without custom CSS: link-opacity-* fades a link, link-offset-* moves the underline, link-underline-{colour} and link-underline-opacity-* colour and fade the underline. Each has a -hover variant, and icon-link plus icon-link-hover align and animate icons beside link text.
1Link opacity
link-opacity-10 to -100 fade a coloured link.
<figure class="mb-0">
<div inert>
<div class="d-grid gap-1">
<a href="#" class="link-primary link-opacity-100">link-opacity-100</a> <a href="#" class="link-primary link-opacity-75">link-opacity-75</a> <a href="#" class="link-primary link-opacity-50">link-opacity-50</a> <a href="#" class="link-primary link-opacity-25">link-opacity-25</a> <a href="#" class="link-primary link-opacity-10">link-opacity-10</a>
</div>
</div>
<figcaption class="small text-body-secondary mt-2 mb-0">Below 100 the link text no longer reaches 4.5:1 - keep links at full strength and use the faded steps on hover.</figcaption>
</figure>2Opacity on hover
link-opacity-*-hover changes the opacity only while the pointer is over the link - the resting link stays at full strength (AA).
<div class="d-grid gap-1">
<a href="#" class="link-primary link-opacity-100 link-opacity-75-hover">100, 75 on hover</a> <a href="#" class="link-primary link-opacity-100 link-opacity-50-hover">100, 50 on hover</a> <a href="#" class="link-primary link-opacity-100 link-opacity-25-hover">100, 25 on hover</a>
</div>3Underline offset
link-offset-1, -2 and -3 move the underline away from the text.
<div class="d-flex flex-wrap gap-4">
<a href="#" class="link-offset-1">link-offset-1</a> <a href="#" class="link-offset-2">link-offset-2</a> <a href="#" class="link-offset-3">link-offset-3</a>
</div>4Offset on hover
link-offset-3-hover lowers the underline while hovering.
<div class="d-flex flex-wrap gap-4">
<a href="#" class="link-offset-1 link-offset-3-hover">Multi-currency wallets</a> <a href="#" class="link-offset-2 link-offset-3-hover link-underline-opacity-50">Payroll</a>
</div>5Underline colours
link-underline-{colour} colours only the underline, independent of the text.
<div class="d-flex flex-wrap gap-3">
<a href="#" class="link-body-emphasis link-underline link-underline-primary">primary</a> <a href="#" class="link-body-emphasis link-underline link-underline-success">success</a> <a href="#" class="link-body-emphasis link-underline link-underline-danger">danger</a> <a href="#" class="link-body-emphasis link-underline link-underline-warning">warning</a> <a href="#" class="link-body-emphasis link-underline link-underline-info">info</a>
</div>6Underline opacity
link-underline-opacity-0 to -100 fade the underline while the text keeps its colour.
<div class="d-grid gap-1">
<a href="#" class="link-offset-2 link-underline link-underline-opacity-0">link-underline-opacity-0</a> <a href="#" class="link-offset-2 link-underline link-underline-opacity-10">link-underline-opacity-10</a> <a href="#" class="link-offset-2 link-underline link-underline-opacity-25">link-underline-opacity-25</a> <a href="#" class="link-offset-2 link-underline link-underline-opacity-50">link-underline-opacity-50</a> <a href="#" class="link-offset-2 link-underline link-underline-opacity-75">link-underline-opacity-75</a> <a href="#" class="link-offset-2 link-underline link-underline-opacity-100">link-underline-opacity-100</a>
</div>7Underline appears on hover
link-underline-opacity-0 with link-underline-opacity-75-hover: the underline fades in on hover.
<ul class="list-unstyled mb-0 d-grid gap-1">
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover">Finance tools your accountant will love</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover">Business banking without the paperwork</a></li>
<li><a href="#" class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover">Corporate cards with built-in controls</a></li>
</ul>8Everything combined
Colour, opacity, offset and underline utilities on one link, with hover states.
<a href="#" class="link-success link-offset-2 link-offset-3-hover link-underline-success link-underline-opacity-25 link-underline-opacity-100-hover link-opacity-75 link-opacity-100-hover fw-semibold">No hidden fees <i class="bi bi-arrow-right" aria-hidden="true"></i></a>9Icon link
icon-link aligns an icon with the text and spaces it with a gap.
<div class="d-flex flex-wrap gap-4">
<a href="#" class="icon-link"><i class="bi bi-file-earmark-pdf-fill" aria-hidden="true"></i> Download PDF</a> <a href="#" class="icon-link">Open in editor <i class="bi bi-box-arrow-up-right" aria-hidden="true"></i></a>
</div>10Icon moves on hover
icon-link-hover nudges the trailing icon when you hover the link.
<a href="#" class="icon-link icon-link-hover link-offset-2">Explore savings <i class="bi bi-arrow-right" aria-hidden="true"></i></a>11Quiet body links
link-body-emphasis with a faint underline suits links inside long text.
Clear prices, honest advice and no surprises along the way. invoicing Cash flow forecasts show where you will be next month, not just today.
<p class="mb-0">Clear prices, honest advice and no surprises along the way. <a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">invoicing</a> Cash flow forecasts show where you will be next month, not just today.</p>12Footer link columns
Secondary links without underline that gain it on hover.
<div class="row g-3 small">
<div class="col-6 col-md-3">
<div class="fw-semibold mb-2">
Product
</div>
<ul class="list-unstyled d-grid gap-1 mb-0">
<li><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">Features</a></li>
<li><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">Pricing</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<div class="fw-semibold mb-2">
Company
</div>
<ul class="list-unstyled d-grid gap-1 mb-0">
<li><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">About</a></li>
<li><a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">Jobs</a></li>
</ul>
</div>
</div>13Path links
A breadcrumb-like path built from links with an offset and a subtle underline.
<nav class="small" aria-label="Path">
<a href="#" class="link-secondary link-offset-2 link-underline-opacity-25">Home</a> / <a href="#" class="link-secondary link-offset-2 link-underline-opacity-25">Savings</a> / <span class="text-body-emphasis" aria-current="page">Metal card</span>
</nav>14Links on a dark surface
link-light and link-warning keep contrast on bg-dark.
<div class="bg-dark rounded-3 p-3 d-flex flex-wrap gap-3" data-ui-theme="dark">
<a href="#" class="link-light link-offset-2">link-light</a> <a href="#" class="link-light link-opacity-75 link-opacity-100-hover">link-light 75</a> <a href="#" class="link-warning link-underline-opacity-50">link-warning</a>
</div>15Focus ring on a link
focus-ring adds a soft focus outline; focus-ring-{colour} changes its colour. Tab to the links to see it.
<div class="d-flex flex-wrap gap-3">
<a href="#" class="focus-ring py-1 px-2 rounded-2 text-decoration-none">Default focus ring</a> <a href="#" class="focus-ring focus-ring-success py-1 px-2 rounded-2 text-decoration-none link-success">Success focus ring</a>
</div>16Tag links
Small tag links whose underline appears on hover.
<div class="d-flex flex-wrap gap-2 small">
<a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#guide</a> <a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#community</a> <a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#powerful</a> <a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">#how-to</a>
</div>17Card title link
A title link without underline plus stretched-link for a fully clickable card.
Aug 13, 2026
Spend smarter, close the books faster
Issue virtual and physical cards to your team with limits you control.
<div class="position-relative border rounded-4 p-3" style="max-width:22rem">
<div class="small text-body-secondary">
Aug 13, 2026
</div>
<a href="#" class="stretched-link link-body-emphasis link-underline-opacity-0 fw-semibold">Spend smarter, close the books faster</a>
<p class="small mb-0 mt-1">Issue virtual and physical cards to your team with limits you control.</p>
</div>18Table of contents
link-secondary entries with the current one in link-primary and a thicker offset.
<nav class="d-grid gap-1 small border-start ps-3" aria-label="On this page">
<a href="#" class="link-primary link-offset-3 fw-semibold" aria-current="true">Overview</a> <a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-50-hover">Installation</a> <a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-50-hover">Configuration</a> <a href="#" class="link-secondary link-underline-opacity-0 link-underline-opacity-50-hover">FAQ</a>
</nav>19Destructive text link
link-danger with a danger underline for actions like removing an item.
Invoice pack
Remove
<div class="d-flex justify-content-between align-items-center border rounded-3 p-3" style="max-width:24rem">
<span>Invoice pack</span> <a href="#" class="link-danger link-underline-danger link-underline-opacity-25 link-underline-opacity-100-hover small">Remove</a>
</div>20Download links list
icon-link entries with file sizes and opacity on the meta text.
- cora-hq.zip 7 MB
- user-guide.pdf 9 MB
<ul class="list-unstyled mb-0 d-grid gap-2">
<li><a href="#" class="icon-link icon-link-hover"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i> cora-hq.zip <i class="bi bi-download" aria-hidden="true"></i></a> <span class="small text-body-secondary">7 MB</span></li>
<li><a href="#" class="icon-link icon-link-hover"><i class="bi bi-file-earmark-zip-fill" aria-hidden="true"></i> user-guide.pdf <i class="bi bi-download" aria-hidden="true"></i></a> <span class="small text-body-secondary">9 MB</span></li>
</ul>