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.