Input
Fill data or information using input is better than writing by pen.
Basic Inputs
Input Styles
To set rounded border to input box, use .round
class and
to set square border to input box, use .sqaure
class alongwith
.form-control
class.
Horizontal Input
To make label in center of form-control, use .col-form-label
class with
<label>
element. This is default bootstrap class.
File Input
Default
With Icon And Button Color
Input with Icons
For Input Box with icon use .position-relative
class with
.form-group
and use class .has-icon-left
or .has-icon-right
class for icon on
left side.
Left Icon
Right Icon
Control Sizing Option
For different sizes of Input, Use classes like .form-control-lg
&
.form-control-sm
for Large, Small input box.
Large
Default
Small
Input Validation States
You can indicate invalid and valid form fields with .is-invalid
and
.is-valid
. Note that .invalid-feedback
is also supported
with these classes.