Basic Inputs
Input Styles
To set rounded border to input box,use .roundclass and to set square border to input box,use .sqaureclass alongwith .form-controlclass.
Horizontal Input
To make label in center of form-control,use .col-form-labelclass with <label>element. This is default bootstrap class.
File Input
Floating Label Inputs
For Flating Label Inputs,need to use .form-label-groupclass & add attribute disabledfor disabled Floating Label Input.
Input with Icons
For Input Box with icon use .position-relativeclass with .form-groupand use class .has-icon-leftclass 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-smfor Large,Small input box.
Large
Default
Small
Input Validation States
You can indicate invalid and valid form fields with .is-invalidand .is-valid. Note that .invalid-feedbackis also supported with these classes.
Input Validation States with Tooltips
Use .needs-validationwith <form>for Input Validation states with tooltip,.{valid/invalid}-feedbackclasses for .{valid/invalid}-tooltipclasses to display validation feedback in a styled tooltip.
