Other Helpers

Focus Ring, Icon Link, Vertical Rule and Visually Hidden Helpers

Icon link, link and opacity utilities, a vertical rule and a focus ringHTMLLive
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<a class="visually-hidden-focusable" href="#main">Skip to main content</a>
<div class="hstack gap-3 p-3" id="main">
  <a href="#" class="icon-link icon-link-hover">Read the docs
    <svg class="bi" viewBox="0 0 16 16"><path d="M1 7h10V4l4 4-4 4V9H1z"/></svg></a>
  <a href="#" class="link-offset-2 link-underline-opacity-25">Offset underline</a>
  <div class="vr"></div>
  <span class="opacity-25">25%</span> <span class="opacity-50">50%</span> <span>100%</span>
  <div class="vr"></div>
  <a href="#" id="focused" class="focus-ring focus-ring-success px-2 border rounded">Focused</a>
</div>
<script>document.getElementById('focused').focus();</script>
Browser output of Listing 3.51
Browser output of 51