Bootstrap4 Form Controls
Bootstrap4 supports the following form controls:
- input
- textarea
- checkbox
- radio
- select
Bootstrap Input
Bootstrap supports all HTML5 input types:
text, password, datetime, datetime-local, date, month, time, week, number,
email, url, search, tel, and color.
Note:If the input's type attribute is not properly declared, the input box style will not be displayed.
The following example uses two input elements, one is text and one is password:
Example
<div class="form-group">
<label for="usr">Username:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
Try it »
Bootstrap textarea
The following example demonstrates the textarea style.
Example
<div class="form-group">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Try it »
Bootstrap Checkbox
Checkboxes are used to let users select from a series of preset options, and they can select one or more.
The following example contains three options. The last one is disabled:
Example
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Try it »
Use.form-check-inlineclass can make the options display on the same line:
Example
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Try it »
Bootstrap Radio Buttons
Radio buttons are used to let users select from a series of preset options, and they can only select one.
The following example contains three options. The last one is disabled:
Example
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Try it »
Use.radio-inlineclass can make the options display on the same line:
Example
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label>
Try it »
Bootstrap Select Dropdown Menu
When you want users to select from multiple options, but by default only one option can be selected, use a select box.
The following example contains two dropdown menus:
Example
<div class="form-group">
<label for="sel1">Dropdown menu:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Try it » Other Extensions