BS4 Inputs
Supported Form Controls
- input
- textarea
- checkbox
- radio
- select
Bootstrap Input
Text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color are among the HTML5 input types that Bootstrap supports.
Note: If an input’s type is not correctly stated, it will not be fully styled!
One input element of type=”text” and one of type=”password” are shown in the following example. We utilize the .form-control class, as we discussed in the Forms chapter, to style inputs with full-width, appropriate padding, etc.
Example
<div class="form-group">
<label for="usr">Name:</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>
Bootstrap Textarea
The sample that follows has a textarea:
Example
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Bootstrap Checkboxes
If you want the user to be able to choose from a list of pre-selected options, you utilize checkboxes.
Three checkboxes can be found in the sample that follows. The final option is not active:
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">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Example explained
To guarantee that labels and checkboxes have the correct margins, use a wrapper element with class=”form-check”.
To properly style checkboxes inside the .form-check container, add the .form-check-input class and the .form-check-label class to label elements.
Inline Checkboxes
If the checkboxes should show up on one line, use the .form-check-inline class:
Example
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>Option 3
</label>
</div>
Bootstrap Radio Buttons
If you want to restrict the user to choose only one choice from a list of pre-selected options, you can use radio buttons.
Three radio buttons can be found in the example below. The final option is not active:
Example
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Similar to checkboxes, if you want the radio buttons to show up on one line, use the .form-check-inline class:
Example
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>Option 3
</label>
</div>
Bootstrap Select List
==== EXAMPLE MUKAVU ====
If you wish to give the customer a choice between several options, you can utilize select lists.
The dropdown list (also known as the pick list) in the example below
Example
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
Form Control Sizing
Modify the form control’s size by using. The .form-control-sm or .form-control-lg construct.
==== EXAMPLE MUKAVU ====
Example
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">
Form Control with Plain Text
If you wish to style the input field as plain text, use the .form-control-plaintext:
==== EXAMPLE MUKAVU ====
Example
<input type="text" class="form-control-plaintext">
Form Control File and Range
To style a range control or a file field with full-width, add the .form-control-range class to input type “range” or the .form-control-file class to input type “file”:
==== EXAMPLE MUKAVU ====
Example
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
