check

  <div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">ドロップダウン</button>
    <!-- divで作成するコンテンツありのメニュー -->
    <div class="dropdown-menu">
      <h6 class="dropdown-header">ドロップダウンメニューのタイトル</h6>
      <form class="px-4 py-3">
        <div class="form-group">
          <label for="email">メールアドレス</label>
          <input type="email" class="form-control" id="email" placeholder="email@example.com">
        </div>
        <div class="form-group">
          <label for="password">パスワード</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> ログイン情報を記憶 </label>
        </div>
        <button type="submit" class="btn btn-secondary">ログイン</button>
      </form>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#1">初めての方</a>
      <a class="dropdown-item" href="#2">パスワードをお忘れの方</a>
    </div>
  </div>

  <form>
    <div class="form-group">
      <!-- 入力要素ごとにform-group、入力エリアはform-control -->
      <label for="email1">メールアドレス</label>
      <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="メールアドレスを入力">
      <small id="emailHelp" class="form-text text-muted">キャリアメールは届かない場合があります。</small>
    </div>
    <div class="form-group">
      <label for="password1">パスワード</label>
      <input type="password" class="form-control" id="password1" placeholder="パスワードを入力">
    </div>
    <div class="form-group">
      <label for="select1">プルダウンメニューから選んでください</label>
      <select class="form-control" id="select1">
        <option>メニュー1</option>
        <option>メニュー2</option>
        <option>メニュー3</option>
        <option>メニュー4</option>
        <option>メニュー5</option>
      </select>
    </div>
    <!-- 複数選択のプルダウンメニュー -->
    <div class="form-group">
      <label for="select2">複数選択のプルダウンメニュー</label>
      <select multiple class="form-control" id="select2">
        <option>複数選択可A</option>
        <option>複数選択可B</option>
        <option>複数選択可C</option>
        <option>複数選択可D</option>
        <option>複数選択可E</option>
      </select>
    </div>
    <div class="form-group">
      <label for="textarea1">複数行のテキスト入力欄</label>
      <textarea class="form-control" id="textarea1" rows="3"></textarea>
    </div>
    <div class="form-group">
      <label for="file1">ファイルを選択</label>
      <input type="file" class="form-control-file" id="file1">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="checkbox01">
      <label class="form-check-label" for="">チェックする</label>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
  </form>

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトル
  </h3>
  <div class="form-row">
    <!-- 最小単位のセット、勝手に順番に２列で並んでいく -->
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-control">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="form-group col-sm-6">
      <label for="file1">File:</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

  <form>
    <!-- form-groupではなく、form-checkを使う -->
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox02" value="option1">
      <label class="form-check-label" for="checkbox02">1</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox03" value="option2">
      <label class="form-check-label" for="checkbox03">2</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" class="form-check-input" id="checkbox04" value="option3" disabled>
      <label class="form-check-label" for="checkbox04">3</label>
    </div>
  </form>

  <form>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" value="" id="checkbox06" disabled>
      <label class="form-check-label" for="checkbox06">チェック（無効）</label>
    </div>
  </form>

  <form>
    <div class="form-check">
      <input type="checkbox" class="form-check-input position-static" id="checkbox07" value="option1" aria-label="...">
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input position-static" name="blankRadio" id="blankRadio1" value="option1"
        aria-label="...">
    </div>
  </form>

  <form>
    <!-- カスタムフォームのチェックボックス -->
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox08" checked>
      <label class="custom-control-label" for="checkbox08">選択済み</label>
    </div>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox09" unchecked>
      <label class="custom-control-label" for="checkbox09">未選択</label>
    </div>
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input indeterminate-box" id="checkbox10">
      <label class="custom-control-label" for="checkbox10">不確定</label>
    </div>
  </form>

  <form>
    <!-- チェックボックスを無効にする -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="checkbox11" disabled>
      <label class="custom-control-label" for="checkbox11">
        チェック（無効）
      </label>
    </div>
    <!-- ラジオボタンを無効にする -->
    <div class="custom-control custom-radio">
      <input type="radio" name="radioDisabled" id="checkbox12" class="custom-control-input" disabled>
      <label class="custom-control-label" for="checkbox12">
        オプション（無効）
      </label>
    </div>
  </form>

  <form>
    <!-- カスタムフォームのチェックボックス -->
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" class="custom-control-input" id="checkbox13">
      <label class="custom-control-label" for="checkbox13">チェックする</label>
    </div>
    <!-- カスタムフォームのラジオボタン -->
    <div class="custom-control custom-radio">
      <input type="radio" id="option1" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option1">オプション1</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="option2" name="option" class="custom-control-input">
      <label class="custom-control-label" for="option2">オプション2</label>
    </div>
  </form>

  <form>
    <div class="form-row align-items-center">
      <div class="col-auto">
        <label class="sr-only" for="inputName">氏名</label>
        <input type="text" class="form-control mb-2" id="inputName" placeholder="氏名を入力">
      </div>
      <div class="col-auto">
        <label class="sr-only" for="inputUsername">ユーザーネーム</label>
        <div class="input-group mb-2">
          <input type="text" class="form-control" id="inputUsername" placeholder="ユーザーネームを入力">
        </div>
      </div>
      <div class="col-auto">
        <div class="form-check mb-2">
          <input type="checkbox" class="form-check-input" id="check">
          <label class="form-check-label" for="check"> チェックする </label>
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary mb-2">送信</button>
      </div>
    </div>
  </form>

  <form>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail">メールアドレス</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
      </div>
      <div class="form-group col-md-6">
        <label for="inputPassword">パスワード</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="inputState">国</label>
        <select id="inputState" class="form-control">
          <option selected>Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <label for="inputZip">郵便番号</label>
        <input type="text" class="form-control" id="inputZip">
      </div>
      <div class="form-group col-md-6">
        <label for="inputCity">都道府県</label>
        <input type="text" class="form-control" id="inputCity">
      </div>
    </div>
    <div class="form-group">
      <label for="inputAddress1">住所1</label>
      <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
    </div>
    <div class="form-group">
      <label for="inputAddress2">住所2</label>
      <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check">
        <label class="form-check-label" for="check">チェックする</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">サインイン</button>
  </form>

  <form>
    <fieldset disabled>
      <div class="form-group">
        <label for="disabledTextInput">無効な入力欄</label>
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
      </div>
      <div class="form-group">
        <label for="disabledSelect">無効なプルダウンメニュー</label>
        <select id="disabledSelect" class="form-control">
          <option>Disabled select</option>
        </select>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledCheck" disabled>
        <label class="form-check-label" for="disabledCheck">無効なチェックボックス</label>
      </div>
      <button type="submit" class="btn btn-primary">無効な送信ボタン</button>
    </fieldset>
  </form>

  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
            <label class="form-check-label" for="radios1">
              オプション1
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
            <label class="form-check-label" for="radios2">
              オプション2
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
            <label class="form-check-label" for="radios3">
              オプション3（無効）
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">チェックボックス</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="check1">
          <label class="form-check-label" for="check1">
            チェックする
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">サインイン</button>
      </div>
    </div>
  </form>

  <!-- formにclassを設定する -->
  <form class="form-inline">
    <label class="sr-only" for="name">氏名</label>
    <input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
    <label class="sr-only" for="username">ユーザーネーム</label>
    <div class="input-group mb-2 mr-sm-2">
      <div class="input-group-prepend">
        <div class="input-group-text">@</div>
      </div>
      <input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
    </div>
    <div class="form-check mb-2 mr-sm-2">
      <input class="form-check-input" type="checkbox" id="checkbox20">
      <label class="form-check-label" for="checkbox20">
        チェックする
      </label>
    </div>
    <button type="submit" class="btn btn-primary mb-2">送信</button>
  </form>

  <!-- input=groupを使う -->
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="checkbox" aria-label="次のテキスト入力用のチェックボックス">
      </div>
    </div>
    <input type="text" class="form-control" aria-label="チェックボックス付テキスト入力欄">
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" aria-label="次のテキスト入力用のラジオボタン">
      </div>
    </div>
    <input type="text" class="form-control" aria-label="ラジオボタン付テキスト入力欄">
  </div>

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" aria-label="次のテキスト入力用のラジオボタン">
      </div> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
    </div>
    <input type="text" class="form-control" aria-label="金額">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="金額">
    <div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
      <div class="input-group-text">
        <input type="checkbox" aria-label="前のテキスト入力用のチェックボックス">
      </div>
    </div>
  </div>

  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation01">姓</label>
        <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
        <div class="valid-feedback">
          入力済！
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validation02">名</label>
        <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
        <div class="valid-feedback">
          入力済！
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation03">市町村</label>
        <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
        <div class="invalid-feedback">
          市町村名を入力してください
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation04">都道府県</label>
        <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
        <div class="invalid-feedback">
          都道府県名を入力してください
        </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation05">郵便番号</label>
        <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
        <div class="invalid-feedback">
          郵便番号を入力してください
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>

  <!-- マウスオンで説明文を表示する -->
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation01">姓</label>
        <input type="text" class="form-control" id="validation01" placeholder="First name" value="山田" required>
        <div class="valid-tooltip"> 入力済！ </div>
      </div>
      <div class="col-md-6 mb-3">
        <label for="validation02">名</label>
        <input type="text" class="form-control" id="validation02" placeholder="Last name" value="太郎" required>
        <div class="valid-tooltip"> 入力済！ </div>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
        <label for="validation03">市町村</label>
        <input type="text" class="form-control" id="validation03" placeholder="市町村名を入力" required>
        <div class="invalid-tooltip"> 市町村名を入力してください </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation04">都道府県</label>
        <input type="text" class="form-control" id="validation04" placeholder="都道府県名を入力" required>
        <div class="invalid-tooltip"> 都道府県名を入力してください </div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validation05">郵便番号</label>
        <input type="text" class="form-control" id="validation05" placeholder="郵便番号を入力" required>
        <div class="invalid-tooltip"> 郵便番号を入力してください </div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>
  <!-- 無効な入力がある場合にフォームの送信を無効にする -->
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Bootstrapのフォームの入力検証スタイルを適用するフォームを取得
        var forms = document.getElementsByClassName('needs-validation');
        // ループして帰順を防ぐ
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>

  <div class="btn-group" data-toggle="buttons">
    <!-- labelでinputを囲む -->
    <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>

  <!-- data-toggle="button" を指定すると、トグルボタンを作成することができます -->
  <!-- トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持される -->
  <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>