Bootstrap toggle buttons dont work following the recommended documentation

I use Bootstrap 4 and following the documentation i implemented a toggle button group like this:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="checkbox">Test
  </label>
</div>

The toggle is supposed to change the buttons active state so i added the following css to change the buttons color and background-color when toggled:

.btn.btn-secondary {
  color: BLACK;
  background-color: WHITE;
}

.btn.btn-secondary.active {
  color: WHITE;
  background-color: BLACK;
}

The problem is that the button doesnt toggle. It doesnt switch to the active state when clicked.

Then i found this working stackblitz. It doesnt use data-toggle="buttons",but it adds ng-bootstraps ngbButtonLabel and ngbButton to the label and input.

By following that example of the stackblitz and applying it to my code the toggle button functionality works correctly:

<div class="btn-group btn-group-toggle">
  <label class="btn btn-secondary" ngbButtonLabel>
    <input type="checkbox" ngbButton>Test
  </label>
</div>

I would like to know, why doesnt the way i tried to implement it the first time following bootstraps documentaiton work?