Input

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

Basic Inputs

Basic Input

Input text with helpeg.someone@example.com

With Helper Text

Find helper text here for given textbox.

Disabled Input

Readonly Input

Static Text

email@mazer.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.

Rounded Input

Square Input

Horizontal Input

To make label in center of form-control,use .col-form-labelclass with <label>element. This is default bootstrap class.

First Name

Last Name

File Input

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

Input with Icons

For Input Box with icon use .position-relativeclass with .form-groupand use class .has-icon-leftor .has-icon-rightclass 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.

Valid State

This is valid state.

Invalid State

This is invalid state.