Basic Input

Static Text


Input text with help


With Helper Text

Find helper text here for given textbox.

Disabled Input

Readonly Input

Rounded Input

To set rounded border to input box, use .rounded class alongwith .form-control class.

Square Input

To set square border to input box, use .rounded-0 class alongwith .form-control class.

Label Input

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

use .form-label-group class & add attribute disabled for disabled Input.


Icon Left, Default Input


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

Large Input

Default Input

Small Input

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.

Theme Config

Theme Layout

RTL Layout

Theme Colors