Bootstrap checkboxまとめ

Bootstrapにてcheckboxを実装する時の忘備録

ポイント1. クラスform-groupを当てておく

ポイント2. divでクラス checkboxを当てておく bootstrapの仕様

ポイント3. name属性は同じで良い。

ポイント4.inputタグのtype= "checkbox"

ポイント5.複数選択可能の時にcheckbox

こんな画面にしたい。

html

        <div class="form-group">
          <label>質問内容</label>
          <div class="checkbox">
            <label>
              <input id="q1_html" type="checkbox" name="q_1" value="html">
              Rails
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input id="q1_html" type="checkbox" name="q_1" value="html">
              javascript
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input id="q1_html" type="checkbox" name="q_1" value="html">
              Python
            </label>
          </div>
        </div>


 <!-- Bootstrap -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
    integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"
    crossorigin="anonymous"></script>

ついでにバッジ

ポイント1. spanで指定 spanはインライン要素-> 横に並ぶ

ポイント1. class="badge"を当てる

色は下記参照

     
       <div class="form-group">
          <label for="name">お名前<span class="badge badge-danger">必須</span></label>
          <input type="text" id="name" name="name" class="form-control">
        </div>

badgeの色

getbootstrap.com