Added in v5.3

View on GitHub

Focus ring

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

On this page

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.

Example

Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.

See Bootstrap examples that are incompatible with Orange Design System.

Incompatibility with Orange Design System. More information

This helper should not be used because the rendering provided in the following examples does not respect the Orange Design System specifications.
Custom focus ring 
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>
html

Customize

Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles.

CSS variables

Modify the --bs-focus-ring-* CSS variables as needed to change the default appearance.

See Bootstrap examples that are incompatible with Orange Design System.

Incompatibility with Orange Design System. More information

This helper should not be used because the rendering provided in the following examples does not respect the Orange Design System specifications.
Green focus ring 
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
  Green focus ring
</a>
html

.focus-ring sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts.

scss/_root.scss 
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};

By default, there is no --bs-focus-ring-x, --bs-focus-ring-y, or --bs-focus-ring-blur, but we provide CSS variables with fallbacks to initial 0 values. Modify them to change the default appearance.

Blurry offset focus ring 
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
  Blurry offset focus ring
</a>
html

Sass variables

Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Boosted-powered project.

scss/_variables.scss 
$focus-ring-width:      .25rem;
$focus-ring-opacity:    .25;
$focus-ring-color:      rgba($primary, $focus-ring-opacity);
// Boosted mod: no `$focus-ring-blur`
$focus-ring-box-shadow: null; // Boosted mod: instead of `0 0 $focus-ring-blur $focus-ring-width $focus-ring-color`

Sass utilities API

In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.

See Bootstrap examples that are incompatible with Orange Design System.

Incompatibility with Orange Design System. More information

This helper should not be used because the rendering provided in the following examples does not respect the Orange Design System specifications.

Primary focus

Secondary focus

Success focus

Danger focus

Warning focus

Info focus

Light focus

Dark focus

<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
html

Focus ring utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss 
"focus-ring": (
  css-var: true,
  css-variable-name: focus-ring-color,
  class: focus-ring,
  values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),