テキスト・パスワード・テキストボックスでは、入力項目のグループに .form-group
を、入力部品に .form-control
を指定します。
<div class="form-group"> <label for="text1">Text:</label> <input type="text" id="text1" class="form-control"> </div> <div class="form-group"> <label for="passwd1">Password:</label> <input type="password" id="passwd1" class="form-control"> </div> <div class="form-group"> <label for="textarea1">Textarea:</label> <textarea id="textarea1" class="form-control"></textarea> </div>
セレクト部品の場合は、.form-control
または .custom-select
を用います。
<div class="form-group"> <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"> <label for="select1b">Select:</label> <select id="select1b" class="costom-select"> <option>Select A</option> <option>Select B</option> </select> </div>
ファイル部品の場合は .form-control
の代わりに .form-control-file
を指定します。
<div class="form-group"> <label for="file1">File:</label> <input type="file" id="file1" class="form-control-file"> </div>
レンジ部品の場合は .form-control-range
を指定します。
<div class="form-group"> <label for="range1">Range:</label> <input type="range" id="range1" class="form-control-range"> </div>
チェックボックスの場合は .form-check
, .form-check-input
, .form-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>
チェックボックスやラジオボタンをラベル無しで表示する場合は .position-static
を指定します。
<div class="form-check"> <input class="form-check-input position-static" type="checkbox"> </div> <div class="form-check"> <input class="form-check-input position-static" type="checkbox"> </div>
ラジオボタンの場合も同様、.form-check
, .form-check-input
, .form-check-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>
.form-inline
は、横に並ぶインラインフォームを表示します。
<form class="form-inline"> : </form>
チェックボックスやラジオボタンの場合は、.form-check-inline
を指定します。
<div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radio2" id="radio2a" value="A"> <label class="form-check-label" for="radio2a">A</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radio2" id="radio2b" value="B"> <label class="form-check-label" for="radio2b">B</label> </div>
.row
と .col-sm-2
などを用いて、ラベルとフォーム部品を横並びにすることができます。下記の例では *-sm-*
を用いているので、xs サイズでは縦並び、sm サイズ以上の時に横並びになります。
<form> <div class="form-group row"> <label for="text3a" class="col-sm-2 col-form-label">First Name</label> <div class="col-sm-10"> <input type="text" id="text3a" class="form-control"> </div> </div> <div class="form-group row"> <label for="text3b" class="col-sm-2 col-form-label">Last name</label> <div class="col-sm-10"> <input type="text" id="text3b" class="form-control"> </div> </div> </form>
フォームを横に並べるには、.form-row
と .col-sm-6
などを用います。
<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>
.form-control-lg
, .col-form-label-lg
は少し大きめのコントロールとラベルを、.form-control-sm
, .col-form-label-sm
は少し小さめのコントロールとラベルを表示します。
<div class="form-group"> <label for="text5a" class="col-form-label-lg">Large size</label> <input class="form-control form-control-lg" type="text" id="text5a" placeholder="Large size"> </div> <div class="form-group"> <label for="text5b">Normal size</label> <input class="form-control" type="text" id="text5b" placeholder="Normal size"> </div> <div class="form-group"> <label for="text5c" class="col-form-label-sm">Small size</label> <input class="form-control form-control-sm" type="text" id="text5c" placeholder="Small size"> </div>
リードオンリーの部品を表示するには readonly
属性を指定します。枠線を表示しないようにするには、.form-control-plaintext
クラスを追加します。
<input type="text" readonly class="form-control" value="Readonly"> <input type="text" readonly class="form-control form-control-plaintext" value="Readonly plaintext">
.input-group
, .input-group-text
, .input-group-prepend
, .input-group-append
を用いて、下記の様なインプットグループを表示することができます。
<div class="input-group"> <div class="input-group-prepend"><div class="input-group-text">http://</div></div> <input type="text" class="form-control"> <div class="input-group-append"><div class="input-group-text">.example.com/</div></div> </div>