Bootstrap - Focus ring

This chapter discusses about adding and modifying custom focus ring styles to various elements and components.

In Bootstrap 5, the focus ring is a visual indicator that appears around an element when it receives focus. The focus ring is a circular outline that appears around the element, typically in a contrasting color, to indicate that the element is currently active and ready to receive input from the user.

Bootstrap 5 provides a built-in focus ring that is applied to interactive elements such as buttons, links, and form controls by default.

The default outline on :focus is removed by the helper class .focus-ring, thus replacing it with a box-shadow.

Let's see an example showing the usage of .focus-ring:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <div class="container-fluid flex-grow-1">
        <h4>Focus ring</h4>   
        <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-bg-light border rounded-2">
          Example focus ring
        </a>
        <button class="button focus-ring py-1 px-2 text-bg-light border rounded-2">Click Me</button>
        </div>
    </body>
</html>

Customize focus ring

Focus ring can be customized using the CSS variables, Sass variables, utilities, or custom styles.

CSS variables

In order to change the default appearance of a focus ring, modify the CSS variables --bs-focus-ring-*

Let's see an example of customizing the CSS variables --bs-focus-ring-*:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <div class="container-fluid flex-grow-1"> 
        <h4>Focus ring - Customize CSS variable</h4>   
        <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-danger-rgb), .25)">
          Red focus ring
        </a>
       <div> 
    </body>
</html>

Let's see an example of customizing the CSS variables --bs-focus-ring-* in order to make the focus ring blurry:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-fluid flex-grow-1"> 
        <h4>Focus ring - Customize CSS variable</h4>  
        <a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 20px; --bs-focus-ring-y: 20px; --bs-focus-ring-blur: 6px">
          Blur focus ring
        </a>
      </div> 
    </body>
</html>

Utilities

Bootstrap provides several utilities .focus-ring-* to modify the default settings.

For example, modify the color of the focus ring with any of the theme colors.

Let's see an example of customizing the utility .focus-ring-*:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <div class="container-fluid flex-grow-1"> 
        <h4>Focus ring - Customize utilities</h4>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2">Success focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2">Info focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2">Warning focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2">Danger focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2">Secondary focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2">Primary focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2">Dark focus ring</a></p>
        <p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2">Light focus ring</a></p>
      </div>
    </body>
</html>
Advertisements