Input

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

Basic Inputs

Basic Input

Input text with help eg.someone@example.com

With Helper Text

Find helper text here for given textbox.

Disabled Input

Readonly Input

Static Text

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

Rounded Input

Square Input

Horizontal Input

To make label in center of form-control, use .col-form-label class 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-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.

Valid State

This is valid state.

Invalid State

This is invalid state.