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:https://www.tutorialspoint.com/bootstrap/examples/focus_ring.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>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-*:https://www.tutorialspoint.com/bootstrap/examples/focus_ring_CSS.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>Let's see an example of customizing the CSS variables --bs-focus-ring-* in order to make the focus ring blurry:https://www.tutorialspoint.com/bootstrap/examples/focus_ring_CSS_blur.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>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-*:https://www.tutorialspoint.com/bootstrap/examples/focus_ring_utilities.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Leave a Reply