Form control
Text input
Applies to various textual inputs like type="text", type="search", type="email", type="url", type="tel", type="password" and type="number".
<label>Text input label</label>
<input id="inputText"><label>Text input label</label>
<input id="inputText">
Textarea
<label>Textarea</label>
<textarea id="textarea"></textarea><label>Textarea</label>
<textarea id="textarea"></textarea>
Sizing
Small
Large
<h4 class="h5 text-muted mt-3">Small</h4>
<label>Text input label</label>
<input id="inputTextSmall">
<h4 class="h5 text-muted mt-3">Large</h4>
<label>Text input label</label>
<input id="inputTextLarge"><h4 class="h5 text-muted mt-3">Small</h4>
<label>Text input label</label>
<input id="inputTextSmall">
<h4 class="h5 text-muted mt-3">Large</h4>
<label>Text input label</label>
<input id="inputTextLarge">
Readonly
<label>Text input label</label>
<input id="inputTextReadonly"><label>Text input label</label>
<input id="inputTextReadonly">
Readonly plain text
<label>Text input label</label>
<input id="inputTextReadonlyPlaintext"><label>Text input label</label>
<input id="inputTextReadonlyPlaintext">
File
Default
Multiple
Disabled
Small
Large
<h4 class="h5 text-muted mt-3">Default</h4>
<label>Default file input label</label>
<input id="inputFile">
<h4 class="h5 text-muted mt-3">Multiple</h4>
<label>Multiple file input label</label>
<input id="inputFileMultiple" multiple="">
<h4 class="h5 text-muted mt-3">Disabled</h4>
<label>Disabled file input label</label>
<input id="inputFileDisabled" disabled="">
<h4 class="h5 text-muted mt-3">Small</h4>
<label>Small file input label</label>
<input id="inputFileSmall">
<h4 class="h5 text-muted mt-3">Large</h4>
<label>Large file input label</label>
<input id="inputFileLarge"><h4 class="h5 text-muted mt-3">Default</h4>
<label>Default file input label</label>
<input id="inputFile">
<h4 class="h5 text-muted mt-3">Multiple</h4>
<label>Multiple file input label</label>
<input id="inputFileMultiple" multiple="">
<h4 class="h5 text-muted mt-3">Disabled</h4>
<label>Disabled file input label</label>
<input id="inputFileDisabled" disabled="">
<h4 class="h5 text-muted mt-3">Small</h4>
<label>Small file input label</label>
<input id="inputFileSmall">
<h4 class="h5 text-muted mt-3">Large</h4>
<label>Large file input label</label>
<input id="inputFileLarge">
Color picker
<label>Color input label</label>
<input id="inputColor"><label>Color input label</label>
<input id="inputColor">
Datalist
<label>Datalist label</label>
<input id="datalist">
<datalist id="datalistOptions">
<option value="Bootstrap">
</option><option value="Foundation">
</option><option value="Semantic UI">
</option><option value="Bulma">
</option><option value="Materialize">
</option></datalist><label>Datalist label</label>
<input id="datalist">
<datalist id="datalistOptions">
<option value="Bootstrap">
</option><option value="Foundation">
</option><option value="Semantic UI">
</option><option value="Bulma">
</option><option value="Materialize">
</option></datalist>