I have been using Bootstrap 4 and I recently tried to create a toggle button group following the official documentation. Here's the code I used:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
The purpose of the toggle was to change the buttons' active state, so I added some CSS to alter the color and background-color when toggled:
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
However, the toggle functionality did not work as expected. The button did not switch to the active state upon clicking.
After researching further, I came across a functioning example on StackBlitz. This example did not use data-toggle="buttons"; instead, it utilized ng-bootstrap's ngbButtonLabel and ngbButton directives within the label and input elements.
Implementing this approach in my code resulted in the toggle button working correctly:
<div class="btn-group btn-group-toggle">
<label class="btn btn-secondary" ngbButtonLabel>
<input type="checkbox" ngbButton>Test
</label>
</div>
I am curious to understand why the initial implementation, based on Bootstrap's documentation, did not achieve the desired toggle button functionality.