Even with the utilization of JavaScript, it seems that achieving that specific behavior might be unattainable. The occurrence of focus events is limited to one element at a time. It appears that you desire a scenario where only a single button within a group is selected, which is essentially known as toggling and can indeed be implemented using JavaScript across a collection of elements.
<button> elements by themselves do not exhibit this behavior without the intervention of JavaScript. In Bootstrap, it is JavaScript's responsibility to enable certain class combinations and elements to function in unconventional ways.
To fulfill your requirement, you may opt for utilizing <label> tags along with <input type='radio'>.
<input> should precede a <label>
<input> <label></label>
- Add
class='btn-check', a unique #id, assign a grouping name to the <input>, and set the type to 'radio'
<input id='b1' class='btn-chk' name='grp1' type='radio'>
- Include
class='btn', [for] attribute with the value corresponding to the #id of the <input>
<label class='btn' for='b1'>TEXT</label>
- Repeat steps #1 through #3 ensuring that each
#id is unique and every [for] matches accurately.
- Enclose all these elements in a
<div>, <section>, etc., and give it a class of 'btn-grp'.
<div class='btn-group'>
<!-- All <input>s sharing the same `name`
alongside their associated <label>s
-->
</div>
- Repeat steps #1 through #4 making sure that each
name for each <input> matches appropriately within its designated .btn-grp container, and differs from any other name existing outside that particular .btn-grp.
<div class='btn-grp'>
<input name='grp1' ...>
<input name='grp1' ...>
<input name='grp1' ...>
</div>
<div class='btn-grp'>
<input name='grp2' ...>
<input name='grp2' ...>
<input name='grp2' ...>
</div>
In this setup, the key is not the focus but rather a property or attribute called checked. Within CSS, it can be referenced using the pseudo-class SELECTOR:checked, while in JavaScript, it is accessed via NODE.checked as a property and also as an attribute via NODE.toggleAttribute('checked') or in HTML <TAGNAME checked>.
Note: The demo below showcases toggling behavior purely through HTML. No JavaScript has been included, only the Bootstrap stylesheet was utilized.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299879986">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<title>Radio Button Groups</title>
</head>
<body>
<main class="container">
<section class='col'>
<section class='row'>
<div class="btn-group mt-5 mb-2" role="group" aria-label="Primary Button Group">
<input id='p1' type='radio' class="btn-check" name='primary'>
<label class="btn btn-primary" for='p1'>Left</label>
<input id='p2' type='radio' class="btn-check" name='primary'>
<label class="btn btn-primary" for='p2'>Middle</label>
<input id='p3' type='radio' class="btn-check" name='primary'>
<label class="btn btn-primary" for='p3'>Right</label>
</div>
</section>
<section class='row'>
<div class="btn-group mt-2" role="group" aria-label="Secondary Button Group">
<input id='s1' type='radio' class="btn-check" name='secondary'>
<label class="btn btn-secondary" for='s1'>Upper</label>
<input id='s2' type='radio' class="btn-check" name='secondary'>
<label class="btn btn-secondary" for='s2'>Center</label>
<input id='s3' type='radio' class="btn-check" name='secondary'>
<label class="btn btn-secondary" for='s3'>Bottom</label>
</div>
</section>
</section>
</main>
</body>
</html>