Give textual form controls like input upgrade with custom styles, sizing, focus states, and more.

Basic Inputs

Find helper text here for given textbox.

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.


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.

This is valid state.
This is invalid state.