メインコンテンツへスキップ

チェック&ラジオ(Checks and radios) v5.0.0-alpha1設定変更

入力オプションを選択するには、フォームのカスタムラジオボタンとチェックボックスを使用。

 

アプローチ(Approach)

ブラウザ標準のチェックボックスとラジオボタンは、HTML要素のレイアウトと動作を改善する両方の入力タイプ用の一連のクラスである .form-check の助けで置き換えられ、より大きなカスタマイズとクロスブラウザの一貫性を提供。チェックボックスはリスト内の単独か複数のオプションを選択するためのものであり、ラジオボタンは多数のオプションから1つを選択するためのもの。

構造的には、<label> 内の <input>(親子要素)とは対照的に、<input><label> は兄弟要素になる。<input><label> を関連付けるために少し冗長になるが idfor 属性を指定する必要がある。:checked:disabled など全ての <input> の状態には兄弟セレクタ()を使用。.form-check-label クラスと組み合わせると、<input> の状態に基づいて各項目のテキストが簡単にスタイル設定できる。

BootstrapのチェックではカスタムBootstrapアイコンを使ってチェックされた状態か不確定の状態を示す。

 

チェックボックス(Checks)v5.0.0-alpha1クラス名変更

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="formCheckDefault">
  <label for="formCheckDefault" class="form-check-label">
    デフォルトのチェックボックス
  </label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="formCheckChecked" checked>
  <label for="formCheckChecked" class="form-check-label">
    チェック済のチェックボックス
  </label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
従来のチェックボックス
変更なし
カスタム・チェックボックス<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="formCheckDefault">
  <label for="formCheckDefault" class="custom-control-label">
    デフォルトのチェックボックス
  </label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="formCheckChecked" checked>
  <label for="formCheckChecked" class="custom-control-label">
    チェック済のチェックボックス
  </label>
</div>
【設定】
  • div.form-check > [input[type="checkbox"].form-check-input《チェックボックス》 + label.form-check-label《ラベル》]
  • あらかじめチェック済にしておく場合は、input[type="checkbox"].form-check-input[checked] を入れる
アクセシビリティの設定】
  • input.form-check-controlid 属性の値と、label.form-check-labelfor 属性の値を同じにしてチェックボックスとラベルを関連付ける
【変更履歴】
  • 【v5.0.0-alpha1】v4のカスタム・チェックボックスとの変更点:
    • div.custom-control.custom-checkboxdiv.form-check
    • input.custom-control-inputinput.form-check-input
    • label.custom-control-labellabel.form-check-label

不確定チェックボックス(Indeterminate)v5.0.0-alpha1設定変更

チェックボックスは、JavaScriptを手動で設定した場合には、:indeterminate 疑似クラスを使用できる(指定するためのHTML属性はない)。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
JavaScriptdocument.addEventListener('DOMContentLoaded', function() {
  var checkbox = document.getElementsByClassName('your-checkbox');
  checkbox.indeterminate = true;
});
HTML<div class="form-check">
  <input type="checkbox" class="form-check-input your-checkbox" id="formCheckIndeterminate">
  <label for="formCheckIndeterminate" class="form-check-label">不確定チェックボックス</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
JavaScript$(function () {
  $('.your-checkbox').prop('indeterminate', true)
})
HTML<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input your-checkbox" id="formCheckIndeterminate">
  <label for="formCheckIndeterminate" class="custom-control-label">不確定チェックボックス</label>
</div>
【設定】
  • 不確定の表示をしたいチェックボックス用に任意のJavaScriptを設定する(上記は .your-checkbox が入ったチェックボックスで表示する例)
    特定のIDの入っているチェックボックスのみで表示させたい場合は上記のJavaScriptの設定で
    document.getElementsByClassName('クラス名')
    の部分を
    document.getElementById('ID名')
    にする
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの設定がjQueryに依存しない方法に変更

チェックボックスの無効化(Disabled)

disabled 属性を追加すると、関連付けられている <label> は自動的に明るい色に合わせてスタイル設定され、入力の無効状態がわかりやすくなる。

見本
設定例
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="formCheckDisabled" disabled>
  <label for="formCheckDisabled" class="form-check-label">
    無効チェックボックス
  </label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="formCheckCheckedDisabled" checked disabled>
  <label for="formCheckCheckedDisabled" class="form-check-label">
    チェック済の無効チェックボックス
  </label>
</div>
【設定】
  • 無効化したい input.form-check-inputdisabled 属性を入れる

 

ラジオボタン(Radios)v5.0.0-alpha1クラス名変更

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check">
  <input type="radio" class="form-check-input" name="formRadioDefault" id="formRadioDefault1">
  <label for="formRadioDefault1" class="form-check-label">
    デフォルトのラジオボタン
  </label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="formRadioDefault" id="formRadioDefault2" checked>
  <label for="formRadioDefault2" class="form-check-label">
    選択済のラジオボタン
  </label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
従来のラジオボタン
変更なし
カスタム・ラジオボタン<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" name="formRadioDefault" id="formRadioDefault1">
  <label for="customRadio1" class="custom-control-label">
    デフォルトのラジオボタン
  </label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="formRadioDefault2" name="formRadioDefault">
  <label for="formRadioDefault2" class="custom-control-label">この他のカスタムラジオボタンを切替</label>
</div>
【設定】
  • div.form-check > [input[type="radio"].form-check-input《ラジオボタン》 + label.form-check-label《ラベル》]
  • あらかじめ選択済にしておく場合は、input[type="radio"].form-check-input[checked] を入れる
アクセシビリティの設定】
  • input.form-check-controlid 属性の値と、label.form-check-labelfor 属性の値を同じにしてラジオボタンとラベルを関連付ける
【変更履歴】
  • 【v5.0.0-alpha1】v4のカスタム・ラジオボタンとの変更点:
    • div.custom-control.custom-radiodiv.form-check
    • input.custom-control-inputinput.form-check-input
    • label.custom-control-labellabel.form-check-label

ラジオボタンの無効化(Disabled)

disabled 属性を追加すると、関連付けられている <label> は自動的に明るい色に合わせてスタイル設定され、入力の無効状態がわかりやすくなる。

見本
設定例
<div class="form-check">
  <input type="radio" class="form-check-input" name="formRadioDisabled" id="formRadioDisabled" disabled>
  <label for="formRadioDisabled" class="form-check-label">
    無効ラジオボタン
  </label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="formRadioDisabled" id="formRadioCheckedDisabled" checked disabled>
  <label for="formRadioCheckedDisabled" class="form-check-label">
    チェック済の無効ラジオボタン
  </label>
</div>
【設定】
  • 無効化したい <input>disabled 属性を入れる

 

切替スイッチ(Switches)v5.0.0-alpha1クラス名変更

.form-switch クラスを使用して切替スイッチを表示。切替スイッチは disabled 属性もサポート。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="formSwitchCheckDefault">
  <label for="formSwitchCheckDefault" class="form-check-label">デフォルトの切替スイッチ</label>
</div>
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="formSwitchCheckChecked" checked>
  <label for="formSwitchCheckChecked" class="form-check-label">切替済の切替スイッチ</label>
</div>
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="formSwitchCheckDisabled" disabled>
  <label for="formSwitchCheckDisabled" class="form-check-label">無効な切替スイッチ</label>
</div>
<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="formSwitchCheckCheckedDisabled" checked disabled>
  <label for="formSwitchCheckCheckedDisabled" class="form-check-label">無効な切替済の切替スイッチ</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="formSwitchCheckDefault">
  <label for="formSwitchCheckDefault" class="custom-control-label">デフォルトの切替スイッチ</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="formSwitchCheckChecked" checked>
  <label for="formSwitchCheckChecked" class="custom-control-label">切替済の切替スイッチ</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="formSwitchCheckDisabled" disabled>
  <label for="formSwitchCheckDisabled" class="custom-control-label">無効な切替スイッチ</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="formSwitchCheckCheckedDisabled" checked disabled>
  <label for="formSwitchCheckCheckedDisabled" class="custom-control-label">無効な切替済の切替スイッチ</label>
</div>
【設定】
  • チェックボックスの設定で .form-check.form-switch を追加
  • 切替済:input.form-check-inputchecked 属性を入れる
  • 無効化:input.form-check-inputdisabled 属性を入れる
アクセシビリティの設定】
  • input.form-check-controlid 属性の値と、label.form-check-labelfor 属性の値を同じにして切替スイッチとラベルを関連付ける
【変更履歴】
  • 【v5.0.0-alpha1】
    • .custom-control.custom-switch.form-check.form-switch

 

縦積み(Default(stacked))

デフォルトでは、直接の兄弟であるチェックボックスとラジオボタンはいくつでも垂直方向に積み重ねられ、.form-check で適切に配置される。

チェックボックス

見本
設定例
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="defaultCheck1">
  <label for="defaultCheck1" class="form-check-label">
    デフォルトのチェックボックス
  </label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" value="" id="defaultCheck2" disabled>
  <label for="defaultCheck2" class="form-check-label">
    無効のチェックボックス
  </label>
</div>
【設定】
  • div.form-check > label.form-check-label > input[type="checkbox"].form-check-input
  • 無効化したい場合は、input.form-check-inputdisabled 属性を入れる

ラジオボタン

見本
設定例
<div class="form-check">
  <input type="radio" class="form-check-input" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label for="exampleRadios1" class="form-check-label">
    デフォルトのラジオボタン
  </label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="exampleRadios" id="exampleRadios2" value="option2">
  <label for="exampleRadios2" class="form-check-label">
    デフォルトのラジオボタン2
  </label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label for="exampleRadios3" class="form-check-label">
    無効のラジオボタン
  </label>
</div>
【設定】
  • div.form-check > label.form-check > input[type="radio"].form-check-input
  • 無効化したい場合は、input.form-check-inputdisabled 属性を入れる

 

横並び(Inline)v5.0.0-alpha1クラス名変更

.form-check-inline を任意の .form-check に追加して、同じ水平方向の行にチェックボックスやラジオボタンをグループ化。

チェックボックス

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="inlineCheckbox1" value="option1">
  <label for="inlineCheckbox1" class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="inlineCheckbox2" value="option2">
  <label for="inlineCheckbox2" class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="inlineCheckbox3" value="option3" disabled>
  <label for="inlineCheckbox3" class="form-check-label">3 (無効)</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
従来のチェックボックス
変更なし
カスタム・チェックボックス<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox1" value="option1">
  <label for="inlineCheckbox1" class="custom-control-label">1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox2" value="option2">
  <label for="inlineCheckbox2" class="custom-control-label">2</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="inlineCheckbox3" value="option3" disabled>
  <label for="inlineCheckbox3" class="custom-control-label">3 (無効)</label>
</div>
【設定】
  • チェックボックスの設定で .form-check.form-check-inline を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • v4のカスタム・チェックボックスとの変更点:.custom-control.custom-checkbox.custom-control-inline.form-check.form-check-inline

ラジオボタン

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label for="inlineRadio1" class="form-check-label">1</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label for="inlineRadio2" class="form-check-label">2</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" class="form-check-input" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label for="inlineRadio3" class="form-check-label">3 (無効)</label>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
従来のラジオボタン
変更なし
カスタム・ラジオボタン<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label for="inlineRadio1" class="custom-control-label">1</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label for="inlineRadio2" class="custom-control-label">2</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" class="custom-control-input" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label for="inlineRadio3" class="custom-control-label">3 (無効)</label>
</div>
【設定】
  • ラジオボタンの設定で .form-check.form-check-inline を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • v4のカスタム・ラジオボタンとの変更点:.custom-control.custom-checkbox.custom-control-inline.form-check.form-check-inline

 

ラベル無し(Without labels)v5.0.0-alpha1設定変更

ラベルテキストを持たないチェックボックスとラジオボタンでは、それを囲む要素で .form-check を省略。支援技術には、何らかの形式のアクセス可能な名前を提供することを忘れないように(例:aria-label の使用など)。詳細については、フォームの概要のアクセシビリティのセクションに記載。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
チェックボックス<div>
  <input type="checkbox" class="form-check-input" id="checkboxNoLabel" value="" aria-label="...">
</div>
ラジオボタン<div>
  <input type="radio" class="form-check-input" name="radioNoLabel" id="radioNoLabel" value="" aria-label="...">
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
設定例
チェックボックス<div class="form-check">
  <input type="checkbox" class="form-check-input position-static" id="CheckboxNoLabel" value="" aria-label="...">
</div>
ラジオボタン<div class="form-check">
  <input type="radio" class="form-check-input position-static" name="Radio" id="RadioNoLabel" value="" aria-label="...">
</div>
【設定】
  • div > input.form-check-input
アクセシビリティの設定】
  • ラベルテキストの代替として <input>aria-label 属性(要素に対してラベル付けを行う)を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • div.form-check > input.form-check-input.position-staticdiv > input.form-check-input.form-check.position-static の設定は不要に)

 

切替ボタン(Toggle buttons)v5.0.0-alpha1設定変更(「ボタンプラグイン」から移動)

<label> 要素で .form-check-label ではなく .btn スタイルを使用して、ボタンのようなチェックボックスとラジオボタンを作成。これらの切替ボタンは、さらに必要に応じてボタングループにグループ化できる。

チェックボックス切替ボタン(Checkbox toggle buttons)

1. 単体ボタンの設定

見本
設定例
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label for="btn-check" class="btn btn-primary">単独切替ボタン</label>

2. チェック済の場合

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label for="btn-check-2" class="btn btn-primary">チェック済</label>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-group-toggle mb-3" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> チェック済
  </label>
</div>

3.無効化の場合 v5.0.0-alpha3設定追加

見本
設定例
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label for="btn-check-3" class="btn btn-primary">無効</label>
【設定】
  • input[type="checkbox"].btn-check#ID + label.btn.btn-{themecolor}[for="ID"]
  • あらかじめチェック済にしておく場合は、input.btn-check[type="checkbox"]#ID[checked] を入れる
  • 無効化したい場合は、input[type="checkbox"].btn-check#ID[disabled] を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • .btn-group-toggledata-toggle="buttons"(ボタンプラグインの設定)は不要に
    • label.btn.btn-{themecolor} > input[type="checkbox"]input[type="checkbox"].btn-check#ID + label.btn.btn-{themecolor}[for="ID"](親<label><input> 要素から兄<input><label> 要素に)
    • チェック済:label.btn.btn-{themecolor}.active は不要に

ラジオ切替ボタン(Radio toggle buttons)

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label for="option1" class="btn btn-secondary">選択済</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label for="option2" class="btn btn-secondary">ラジオ</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label for="option3" class="btn btn-secondary">無効</label>

...
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> 選択済
  </label>

  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> ラジオ
  </label>

  ...
</div>
【設定】
  • input[type="radio"].btn-check#ID + label.btn[for="ID"]
  • あらかじめ選択済にしておく場合は、input[type="radio"].btn-check#ID[checked] を入れる
  • 無効化したい場合は、input[type="radio"].btn-check#ID[disabled] を追加
【変更履歴】
  • 【v5.0.0-alpha1】
    • .btn-group-toggledata-toggle="buttons"(ボタンプラグインの設定)は不要に
    • label.btn.btn-{themecolor} > input[type="radio"]input[type="radio"].btn-check#ID + label.btn.btn-{themecolor}[for="ID"](親<label><input> 要素から兄<input><label> 要素に)
    • 選択済:label.btn.btn-{themecolor}.active は不要に
  • 【v5.0.0-alpha3】
    • 無効化の設定が追加

アウトラインスタイル(Outlined styles)v5.0.0-alpha1追加

アウトラインスタイルなど、.btn の様々なバリエーションをサポート。

見本


設定例
単体ボタン<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label for="btn-check-outlined" class="btn btn-outline-primary">単体の切替</label>
チェック済ボタン<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label for="btn-check-2-outlined" class="btn btn-outline-secondary">チェック済</label>
ボタングループ<div class="btn-group">
  <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
  <label for="success-outlined" class="btn btn-outline-success">チェック済のSuccessラジオ</label>

  <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
  <label for="danger-outlined" class="btn btn-outline-danger">Dangerラジオ</label>
</div>
【設定】
  • .btn-{themecolor} の部分は .btn-outline-{themecolor} でも使用できる

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 form-check-variables の設定$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;