bootstrap4

bootstrap4.css

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

bootstrap4.css

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

■ドロップダウン：dropdown-menu：コンポーネント：メニュー項目に無効やアクティブの状態を設定する

  <!-- ボタングループ -->
  <div class="btn-group">
    <!-- 切り替えボタン -->
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item disabled" href="#">メニュー02（無効）</a>
      <a class="dropdown-item active" href="#">メニュー03（アクティブ）</a>
    </div>
  </div>

■ボタン：button：コンポーネント：ラジオボタンをボタンに変更する

ラジオ1 ラジオ2 ラジオ3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" checked autocomplete="off">ラジオ1
  </label>
  <label class="btn btn-secondary">
    <input type="radio" autocomplete="off">ラジオ2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" autocomplete="off">ラジオ3
  </label>
</div>

■ボタン：button：コンポーネント：チェックボックスをボタン変更する　data-toggle=buttons

チェック1 チェック2 チェック3

  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked autocomplete="off">チェック1
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック2
    </label>
    <label class="btn btn-secondary">
      <input type="checkbox" autocomplete="off">チェック3
    </label>
  </div>