На случай, если кому-то понадобится ...
Я последовал совету Цимпо вместе с этим уроком для части JavaScript и получил работу ...
HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" id="buttonsDiv" data-toggle="buttons">
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
btn1
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
btn2
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
btn3
</button>
<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
btn4
</button>
</div>
CSS
button:focus{
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
JS
// Get the container element
var btnContainer = document.getElementById("buttonsDiv");
// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
// If there's no active class
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
// Add the active class to the current/clicked button
this.className += " active";
});
}
Рабочий пример