Focus ring
Utility classes that allows you to add and modify custom focus ring styles to elements and components.
Focus ring on BootstrapExample
The .focus-ring helper removes the default outline on :focus, replacing it with a box-shadow that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the :root level, that can be modified for any element or component.
<a class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" href="#!">Custom focus ring</a>Variants
<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>
