Basic Inputs

eg.someone@example.com

Find helper text here for given textbox.

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.

Floating Label Inputs

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

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.

Input Validation States with Tootltips

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

Looks good!
Looks good!
Please provide a valid city.

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
Right Icon
Left Icon with Divider
Right Icon with divider

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
Default
Small

Theme Customizer

Customize & Preview in Real Time
Menu Colors

Theme Layout
Light
Dark
Semi Dark

Collapse Sidebar
Collapse Menu

Navbar Colors

Footer Type

Hide Scroll To Top
Buy Now