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 along with
.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
Floating Label Inputs
For Flating Label Inputs, need to use
.form-label-group class & add attribute
disabled for disabled Floating Label Input.
Input with Icons
For Input Box with icon use
.position-relative class with
.form-group and use class
.has-icon-left class for icon on left side. Wrap
your icon element with
.form-control-position class.
Control Sizing Option
For different sizes of Input, Use classes like
.form-control-lg &
.form-control-sm for Large, Small input box.
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.
Input Validation States with Tooltips
Use .needs-validation with
<form> for Input Validation states with tooltip,
.{valid/invalid}-feedback classes for
.{valid/invalid}-tooltip classes to display validation
feedback in a styled tooltip.
