Bootstrap Inputs
Inputs are extended form controls. Bootstrap supports the following form controls:
- input
- textarea
- checkboxes
- radio
- select
Bootstrap input Type
All HTML 5 input types are are supported by Bootstrap. They are text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. If the types are not properly declared the inputs will not be properly styled.
Here an example is given below using input type:
Example:
<label for="name"> Name: </label>
<input type="text" class="form-control" id="name">
<label for="password"> Password: </label>
<input type="password" class="form-control" id="password">
</div>
Run Example
Bootstrap textarea Type
Here an example is given below using textarea type:
Example:
<label for="comment"> Details: </label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Run Example
Bootstrap checkbox Type
If you want that user can select multiple option from a given list of options then you have to use checkbox.
Example:
<label><input type="checkbox"> Option 1 </label>
</div>
<div class="checkbox">
<label><input type="checkbox"> Option 2 </label>
</div>
<div class="checkbox">
<label><input type="checkbox"> Option 2 </label>
</div>
Run Example
if you want to set the checkboxes on the same line then use the .checkbox-inline class inside <label> tag.
Example:
<label class="checkbox-inline"><input type="checkbox"> Option 2 </label>
<label class="checkbox-inline"><input type="checkbox"> Option 2 </label>
Run Example
Bootstrap radio Type
If you want that user can select only one option from a given list of options then you have to use radio.
Example:
<label><input type="radio"> Option 1 </label>
</div>
<div class="radio">
<label><input type="radio"> Option 2 </label>
</div>
<div class="radio">
<label><input type="radio"> Option 2 </label>
</div>
Run Example
if you want to set the radio buttons on the same line then use the .radio-inline class inside <label> tag.
Example:
<label class="radio-inline"><input type="radio"> Option 2 </label>
<label class="radio-inline"><input type="radio"> Option 2 </label>
Run Example
Bootstrap select Type
Here an example is given below using select type:
Example:
<label for="select1"> Select from the list: </label>
<select class="form-control" id="select1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
Run Example