Basic Inputs

eg.someone@example.com

Find helper text here for given textbox.

email@pixinvent.com

Input Styles

To set rounded border to input box, use .roundclass and to set square border to input box, use .sqaureclass alongwith .form-controlclass.

Floating Label Inputs

For Flating Label Inputs, need to use .form-label-groupclass & add attribute disabledfor disabled Floating Label Input.

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.

This is valid state.
This is invalid state.

Input Validation States with Tootltips

.{valid/invalid}-feedbackclasses for .{valid/invalid}-tooltipclasses to display validation feedback in a styled tooltip.

Looks good!
Looks good!
Please provide a valid city.

Input with Icons

For Input Box with left side icon, use class .has-icon-leftand for use divider between icon and input text box use .input-divider-leftor .input-divider-rightfor left and right divider respectively.

Left Icon
Right Icon
Left Icon with Divider
Right Icon with divider

Floating Label Input with Icons

Left Icon
Right Icon
Left Icon with Divider
Right Icon with divider

Control Sizing Option

For different sizes of Input, Use classes like .form-control-lg& .form-control-smfor Large, Small input box.

Large
Default
Small

Label Control Sizing Option

For different sizes of Input, Use classes like .form-control-lg& .form-control-smfor Large, Small input box.

Large
Default
Small