### Focus ring

Utility classes that allows you to add and modify custom focus ring styles to elements and components.

Focus ring on Bootstrap

##### Example

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.

Custom focus ring

    <a class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" href="#!">Custom focus ring</a>

##### Variants

Primary focus

Secondary focus

Success focus

Danger focus

Warning focus

Info focus

Light focus

Dark focus

    <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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize