The focus-ring helper replaces the browser outline with a soft, theme-coloured ring that appears for keyboard users. Change its colour with focus-ring-* classes or tune size, offset and blur with the --ui-focus-ring-* variables. Press Tab to move through the examples; preview boxes show the ring permanently.
1Basic focus ring
focus-ring on a link: tab to it to see the soft ring; the second copy shows the ring all the time.
Tab to me
Ring preview
<div class="d-flex flex-wrap gap-4 align-items-center">
<a href="#" class="d-inline-flex focus-ring py-1 px-2 rounded text-decoration-none border">Tab to me</a> <span class="d-inline-flex focus-ring hp-ring-on py-1 px-2 rounded border">Ring preview</span>
</div>2Coloured rings
focus-ring-* picks a theme colour for the ring. Shown here as previews.
PrimarySecondarySuccessDangerWarningInfo
<div class="d-flex flex-wrap gap-3">
<span class="d-inline-flex focus-ring focus-ring-primary hp-ring-on py-1 px-2 rounded border">Primary</span><span class="d-inline-flex focus-ring focus-ring-secondary hp-ring-on py-1 px-2 rounded border">Secondary</span><span class="d-inline-flex focus-ring focus-ring-success hp-ring-on py-1 px-2 rounded border">Success</span><span class="d-inline-flex focus-ring focus-ring-danger hp-ring-on py-1 px-2 rounded border">Danger</span><span class="d-inline-flex focus-ring focus-ring-warning hp-ring-on py-1 px-2 rounded border">Warning</span><span class="d-inline-flex focus-ring focus-ring-info hp-ring-on py-1 px-2 rounded border">Info</span>
</div>3Custom ring colour
Set --ui-focus-ring-color to any rgba value, here the template accent colour.
Accent ring on focus
Preview
<a href="#" class="d-inline-flex focus-ring py-2 px-3 rounded text-decoration-none border" style="--ui-focus-ring-color:rgba(var(--wt-accent-rgb),.5)">Accent ring on focus</a> <span class="d-inline-flex focus-ring hp-ring-on py-2 px-3 rounded border ms-3" style="--ui-focus-ring-color:rgba(var(--wt-accent-rgb),.5)">Preview</span>4Offset ring
Move the ring with --ui-focus-ring-x and --ui-focus-ring-y for a playful offset shadow.
Offset ring
<span class="d-inline-flex focus-ring hp-ring-on py-2 px-3 rounded-3 border fw-semibold" style="--ui-focus-ring-x:6px;--ui-focus-ring-y:6px;--ui-focus-ring-blur:0;--ui-focus-ring-width:0">Offset ring</span>5Blurred glow
A large --ui-focus-ring-blur turns the ring into a soft glow.
Glowing focus
<span class="d-inline-flex focus-ring hp-ring-on py-2 px-3 rounded-pill border" style="--ui-focus-ring-blur:12px;--ui-focus-ring-width:2px">Glowing focus</span>6Card links
Whole cards rendered as links get a clear ring for keyboard users. The first card shows the preview.
<div class="row g-3">
<div class="col-md-4">
<a href="#" class="card h-100 text-decoration-none focus-ring hp-ring-on">
<div class="card-body">
<span class="text-primary fs-4"><i class="bi bi-cup-hot" aria-hidden="true"></i></span>
<h3 class="h6 mt-2">Group classes</h3>
<p class="small text-body-secondary mb-0">Clear prices, honest advice and no surprises along the way.</p>
</div>
</a>
</div>
<div class="col-md-4">
<a href="#" class="card h-100 text-decoration-none focus-ring">
<div class="card-body">
<span class="text-primary fs-4"><i class="bi bi-cup-hot" aria-hidden="true"></i></span>
<h3 class="h6 mt-2">Nutrition plans</h3>
<p class="small text-body-secondary mb-0">Online coaching keeps you on track when you travel.</p>
</div>
</a>
</div>
<div class="col-md-4">
<a href="#" class="card h-100 text-decoration-none focus-ring">
<div class="card-body">
<span class="text-primary fs-4"><i class="bi bi-lightbulb" aria-hidden="true"></i></span>
<h3 class="h6 mt-2">Personal training</h3>
<p class="small text-body-secondary mb-0">Every detail is handled by people who care about getting it right.</p>
</div>
</a>
</div>
</div>7List group items
focus-ring-info on actionable list items in place of the default outline.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">How our coaches plan a new class</a><a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">How to choose the right class</a><a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">Building a workout habit that lasts</a><a href="#" class="list-group-item list-group-item-action focus-ring focus-ring-info">Five things we learned this year</a>
</div>8Icon toolbar
Icon buttons share the focus ring; the delete button uses focus-ring-danger.
<div class="d-flex gap-1 p-1 border rounded" role="toolbar" aria-label="Actions">
<button type="button" class="btn btn-light btn-sm focus-ring" aria-label="Reply"><i class="bi bi-reply" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light btn-sm focus-ring" aria-label="Forward"><i class="bi bi-forward" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light btn-sm focus-ring" aria-label="Archive"><i class="bi bi-archive" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light btn-sm focus-ring focus-ring-danger" aria-label="Delete"><i class="bi bi-trash" aria-hidden="true"></i></button>
</div>9Filter chips
Pill-shaped filter links; the ring follows the rounded-pill corners.
<div class="d-flex flex-wrap gap-2">
<a href="#" class="badge rounded-pill text-bg-light border text-decoration-none focus-ring">Strength</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none focus-ring">HIIT</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none focus-ring">Cardio</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none focus-ring">Yoga</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none focus-ring">Recovery</a>
</div>10Avatar link
A round avatar that links to a profile shows a round ring.
<a href="#" class="d-inline-block rounded-circle focus-ring hp-ring-on" aria-label="View profile of Ruby Patel"> <img src="../assets/img/avatar-9.svg" alt="" width="56" height="56" class="rounded-circle d-block"> </a>11Skip link
A skip-to-content link that appears on focus and carries a strong ring.
Skip to main content
Press Tab inside this example to reveal the skip link.
<div class="position-relative border rounded p-3" style="min-height:4rem">
<a href="#" class="visually-hidden-focusable position-absolute top-0 start-0 m-2 btn btn-sm btn-primary focus-ring">Skip to main content</a>
<p class="small text-body-secondary mb-0">Press Tab inside this example to reveal the skip link.</p>
</div>12Page number links
A minimal page switcher where every number shows a ring on focus.
<nav aria-label="Results pages">
<div class="d-flex gap-2">
<a href="#" class="d-inline-flex justify-content-center rounded border text-decoration-none focus-ring py-1" style="width:2.25rem">1</a><a href="#" class="d-inline-flex justify-content-center rounded border text-decoration-none focus-ring py-1 text-bg-primary" aria-current="page" style="width:2.25rem">2</a><a href="#" class="d-inline-flex justify-content-center rounded border text-decoration-none focus-ring py-1" style="width:2.25rem">3</a><a href="#" class="d-inline-flex justify-content-center rounded border text-decoration-none focus-ring py-1" style="width:2.25rem">4</a><a href="#" class="d-inline-flex justify-content-center rounded border text-decoration-none focus-ring py-1" style="width:2.25rem">5</a>
</div>
</nav>13Navigation menu
Nav links with a secondary coloured ring.
<nav aria-label="Main">
<ul class="nav gap-1">
<li class="nav-item"><a class="nav-link rounded focus-ring focus-ring-secondary" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link rounded focus-ring focus-ring-secondary" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link rounded focus-ring focus-ring-secondary" href="#">Customers</a></li>
<li class="nav-item"><a class="nav-link rounded focus-ring focus-ring-secondary" href="#">Support</a></li>
</ul>
</nav>14Image thumbnail link
A gallery thumbnail link: the ring wraps the rounded image.
<div class="d-flex gap-2">
<a href="#" class="d-inline-block rounded focus-ring hp-ring-on"><img src="https://images.unsplash.com/photo-1574680096145-d05b474e2155?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo one" width="96" height="96" class="rounded d-block object-fit-cover"></a> <a href="#" class="d-inline-block rounded focus-ring"><img src="https://images.unsplash.com/photo-1641337221253-fdc7237f6b61?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo two" width="96" height="96" class="rounded d-block object-fit-cover"></a>
</div>15Table links
Small row links in a table with the ring for keyboard navigation.
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Member</th>
<th scope="col" class="text-end">Profile</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tariq Varga</td>
<td class="text-end"><a href="#" class="rounded px-1 focus-ring">View</a></td>
</tr>
<tr>
<td>Ravi Hughes</td>
<td class="text-end"><a href="#" class="rounded px-1 focus-ring">View</a></td>
</tr>
<tr>
<td>Mateo Fischer</td>
<td class="text-end"><a href="#" class="rounded px-1 focus-ring">View</a></td>
</tr>
</tbody>
</table>16Thick ring
Raise --ui-focus-ring-width for high visibility, for example in kiosk or TV interfaces.
Thick warning ring
<span class="d-inline-flex focus-ring focus-ring-warning hp-ring-on py-2 px-3 rounded border" style="--ui-focus-ring-width:.4rem">Thick warning ring</span>17Settings tiles
Large tile links in a settings hub, each with a focus ring.
<div class="row g-2">
<div class="col-6 col-md-3">
<a href="#" class="d-block text-center border rounded-3 p-3 text-decoration-none focus-ring"><span class="d-block fs-3"><i class="bi bi-person" aria-hidden="true"></i></span>Profile</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="d-block text-center border rounded-3 p-3 text-decoration-none focus-ring"><span class="d-block fs-3"><i class="bi bi-shield-lock" aria-hidden="true"></i></span>Security</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="d-block text-center border rounded-3 p-3 text-decoration-none focus-ring"><span class="d-block fs-3"><i class="bi bi-bell" aria-hidden="true"></i></span>Alerts</a>
</div>
<div class="col-6 col-md-3">
<a href="#" class="d-block text-center border rounded-3 p-3 text-decoration-none focus-ring"><span class="d-block fs-3"><i class="bi bi-credit-card" aria-hidden="true"></i></span>Billing</a>
</div>
</div>18Search pill
A rounded-pill search link with an accent ring.
<a href="#" class="d-inline-flex align-items-center gap-2 border rounded-pill px-3 py-2 text-decoration-none text-body-secondary focus-ring hp-ring-on" style="--ui-focus-ring-color:rgba(var(--wt-primary-rgb),.35)"><i class="bi bi-search" aria-hidden="true"></i> Search Sageo Studio</a>19Ring on dark surfaces
A light ring colour keeps focus visible on dark panels.
Docs
Preview
<div class="text-bg-dark rounded p-3 d-flex gap-3">
<a href="#" class="link-light rounded px-2 focus-ring" style="--ui-focus-ring-color:rgba(255,255,255,.5)">Docs</a> <span class="rounded px-2 focus-ring hp-ring-on" style="--ui-focus-ring-color:rgba(255,255,255,.5)">Preview</span>
</div>20Ring next to the default outline
Compare a plain link (browser outline) with a focus-ring link: tab through both.
<div class="d-flex flex-wrap gap-4">
<a href="#">Default browser outline</a> <a href="#" class="focus-ring rounded px-1">Bootstrap focus ring</a>
</div>