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