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@pixinvent.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

Simple File Input

With Browse button

Choose file

Floating Label Inputs

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

Label-placeholder

Icon Left, Default Input

Disabled-placeholder

Input with Icons

For Input Box with icon use .position-relative class with .form-group and use class .has-icon-left 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.

Input Validation States with Tooltips

Use .needs-validation with <form> for Input Validation states with tooltip, .{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