Form Inputs

Default Input

To use add form-control class to the input

Input With Helper Text

Helper Text

Password

Disabled Input

Add attribute disabled to disable input field.

Predefined Input Value

Add attribute value="VALUE" to set predefined value.

Readonly Input Field

Add attribute readonly to set field readonly.

Input With Placeholder

Add attribute placeholder="..." to input area.

Maximum Value

Add attribute maxlength="6" to input area.

Minimum Value

Add attribute minlength="5" to input area.

Input Type Options

Input Type Text

Using input type="text"

Input Type Password

Using input type="password"

Input Phone Number

Using input type="tel"

Input Type Email

Using input type="email"

Input Type URL

Using input type="url"

Input Type Search

Using input type="search"

Input Type Numbers

Using input type="number"

Input Type Date Time

Using input type="datetime-local"

Input Type Date

Using input type="date"

Input Type Time

Using input type="time"

Input Type Week

Using input type="week"

Input Type Month

Using input type="month"

Input Type Color

Using input type="color"

Input Type Range

Using input type="range"

General Textarea

Textarea

Textarea With Placeholder

Textarea With Helper Text

Helper Text

Inline Checkboxes & Radios

Inline Default Checkbox

Inline Default Radio Button

Inline Custom Checkbox

Inline Custom Radios

General Select

Select

Custom Select

To use add .custom-select class

Multiple Select

To use add multiple to the field

Select With Addons

To use add .input-group-prepend class to the div

Select With Buttons

To use add .input-group-append class to the div

File Upload

Default File Upload

To use add .form-control-file class to the input

Custom File Upload

To use add .custom-file-input class to the input
Upload

Custom File Upload with Button Left

To use add .input-group-prepend class to the div

Custom File Upload with Button Right

To use add .input-group-append class to the div

Different Style in Helper Text

Left Helper Text

To use add float-left class to the text
Helper Text

Center Helper Text

To use add text-center class to the text

Helper Text

Right Helper Text

To use add float-right class to the text
Helper Text

Inline Helper Text

Helper Text

Inline Helper Text With Color

Helper Text

Input With Validaton

Input With Success

To use add is-valid class to the input
Success! You've done it.

Input With Danger

To use add is-invalid class to the input
Sorry, that username's taken. Try another?

Inline Input With Success

To use add form-horizontal class to the input
Success! You've done it.

Inline Input With Danger

To use add form-horizontal class to the input
Sorry, that username's taken. Try another?

Input With Tooltip

Tooltip Bottom

Tooltip Right

Tooltip Top

Tooltip Left

Input Text Styles

Input Text Bold

Input Text Normal

Input Text Light

Input Text Italic

Input Text Lowercase

Input Text Uppercase

Input Text Capitalize

Input Sizing

Small Input

Normal Input

Large Input

All Rights Reserved by Adminmart. Designed and Developed by WrapPixel.