Basic Inputs

Basic Input

Input text with help eg.someone@example.com

Disabled Input

With Helper Text

Find helper text here for given textbox.

Readonly Input

Static Text

support@templates-support.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

Floating Label Inputs

For Flating Label Inputs, need to use .form-label-group class & add attribute disabled for disabled Floating Label Input.

Label-placeholder

Disabled-placeholder

File input

Simple File Input

With Browse button

Choose file

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.

Input Validation States with Tootltips

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

First name

Looks good!

Last name

Looks good!

City

Please provide a valid city.

Submit

Input with Icons

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

Left Icon

Right Icon

Left Icon with Divider

Right Icon with divider

Floating Label Input with Icons

Left Icon

Icon Left, Default Input

Right Icon

Icon Right, Default Input

Left Icon with Divider

Icon Left, Default Input

Right Icon with divider

Icon Right, Default Input

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

Label Control Sizing Option

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

Large

Large Input

Default

Default Input

Small

Small Input