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.

Horizontal Input

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

File Input

Floating Label Inputs

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

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.

This is valid 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.

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

How can we help? 😄

7:45 AM

Hey John, I am looking for the best admin template.

Could you please help me to find it out? 🤔

7:50 AM

Stack admin is the responsive bootstrap 4 admin template.

8:01 AM