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.

Custom focus ring

html

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

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.

Green focus ring

html

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

.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

html

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

Sass variables

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

scss/_variables.scss

$focus-ring-width:      .25rem;
$focus-ring-opacity:    .25;
$focus-ring-color:      rgba($primary, $focus-ring-opacity);
$focus-ring-blur:       0;
$focus-ring-box-shadow: 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. Note that cool gray, warm gray, white and midnight variants may not be visible on all background colors given current color mode support.

html

<p><a href="#" class="d-inline-flex focus-ring focus-ring-red py-1 px-2 text-decoration-none border rounded-2">Red focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-chili py-1 px-2 text-decoration-none border rounded-2">Chili focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-blue py-1 px-2 text-decoration-none border rounded-2">Blue focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-oasis py-1 px-2 text-decoration-none border rounded-2">Oasis focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-azurite py-1 px-2 text-decoration-none border rounded-2">Azurite focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-midnight py-1 px-2 text-decoration-none border rounded-2">Midnight focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-cool-gray py-1 px-2 text-decoration-none border rounded-2">Cool-Gray focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warm-gray py-1 px-2 text-decoration-none border rounded-2">Warm-Gray focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-white py-1 px-2 text-decoration-none border rounded-2">White focus</a></p>

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")
),