Focus ring
Utility classes that allows you to add and modify custom focus ring styles to elements and components.
Focus ring on Bootstrap<a class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" href="#!">Custom focus ring</a><p class="mb-4"><a class="focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2" href="#!">Primary focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2" href="#!">Secondary focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2" href="#!">Success focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2" href="#!">Danger focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2" href="#!">Warning focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2" href="#!">Info focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2" href="#!">Light focus</a></p>
<p class="mb-4"><a class="focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2" href="#!">Dark focus</a></p>
