Input
Give textual form controls like input upgrade with custom styles, sizing, focus states, and more.
Basic Inputs
Find helper text here for given textbox.
email@mazer.com
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
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.