Input

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

Basic Inputs

eg.someone@example.com

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.

This is valid state.
This is invalid state.