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