Bootstrap for Material Designで、
テキスト入力とチェックボックスのあるフォームを作成しています。
やりたいことは、Bootstrapのvalidationの例の例のように、以下の2つの項目をチェックしたいと考えていますが、どのクラスをどのように指定すれば良いのかわかりません。
この例のように、form-check-label, form-check-inputを指定してみましたが、デザインが崩れてしまいます。Bootstrap for Material Design用の入力チェックを行うクラスがあるのでしょうか?
- テキストが入力されているか
- チェックボックスが1つ以上チェックされているか
下記のコードは、Bootstrap for Material Designを使用して書いたフォームです。
HTML
1 <form> 2 <div class="form-group"> 3 <label for="input1" class="bmd-label-floating">City</label> 4 <input type="text" class="form-control" id="input1" required> 5 <div class="invalid-feedback">Please provide a valid city.</div> 6 </div> 7 8 <br> 9 <h6>Select keywords</h6> 10 <div> 11 <label class="checkbox-inline"> 12 <input type="checkbox" id="inlineCheckbox1" value="option1"> 0 13 </label> 14 <label class="checkbox-inline"> 15 <input type="checkbox" id="inlineCheckbox2" value="option2"> 1 16 </label> 17 <label class="checkbox-inline"> 18 <input type="checkbox" id="inlineCheckbox3" value="option3"> 2 19 </label> 20 21 <label class="checkbox-inline"> 22 <input type="checkbox" id="inlineCheckbox1" value="option1"> 3 23 </label>
HTML, Bootstrapともに初心者ですが、よろしくお願い致します。
あなたの回答
tips
プレビュー