Form Inputs
Default Input
To use add form-control class to
the input
Input With 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"
Bootstrap Colorpicker
Use form-control-color classs
for bootstrap colorpicker
Input Type Range
Using input type="range"
General Textarea
Textarea
Textarea With Placeholder
Textarea With Helper Text
Inline Checkboxes & Radios
Inline Default Checkbox
Inline Default Radio Button
Inline Custom Checkbox
Inline Custom Radios
General Select
Select
Form Select
To use add .form-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
Disabled File Upload
To use add
disabled attr to the
input
Small File Upload
To use add
.form-control-sm class to
the div
Large File Upload
To use add
.form-control-lg class to the
div
Different Style in Helper Text
Left Helper Text
To use add
justify-content-start class to
the text
Center Helper Text
To use add text-center class to
the text
Right Helper Text
To use add
justify-content-end class to the
text
Inline Helper Text
Inline Helper Text With Color
Input With Validaton
Input With Success
To use add is-valid class to the
input
Input With Danger
To use add is-invalid class to
the input
Inline Input With Success
To use add form-horizontal class
to the input
Inline Input With Danger
To use add form-horizontal class
to the input