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
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
Shopping Cart
5 new-
Supreme toys cooker
Kitchenware Item
$250
-
Supreme toys cooker
Kitchenware Item
$250
-
Supreme toys cooker
Kitchenware Item
$250