Basic Inputs

Find helper text here for given textbox.

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.


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.

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