Default Input text
Default Input text with help
Password
Disabled Input field
Add attribute disabled
to disable input field.
Predefined Input Value
Add attribute value="VALUE"
to set predefined value.
Readonly Input field
Add attribute readonly="readonly"
to set field readonly.
Input with Placeholder
Maximum Value
Add attribute maxlength="NUMBER"
to input area.
To set focus on label click, use .cursor-pointer
class.
Static Text
Muted help text using .text-muted
class.
Basic Textarea
Basic Select
To use custom select add class.custom-select
to select.
To use multiple select add an attribute multiple="multiple"
.
Basic Input Style 2
Another Input style using .form-group-style
Another Select style using .form-group-style
Another types using .form-group-style
class.
Basic File Browser
Basic File Input
Basic Form Helpers
Form Helper Left
Form Helper Center
Form Helper Right
Form Helper Left with color label
Form Helper Center with color label
Form Helper Right with color label
Form Helper Left with block color label
Form Helper Center with block color label
Form Helper Right with block color label
Inline Helper
.block-tag
Inline Helper with color
Inputs With Tooltip
Tooltip On Focus
Tooltip On Hover
Tooltip Bottom
Tooltip On Right
Tooltip On Left
Tooltip Top
Input Styling
.round
class for rounded field
.square
class for squared field
Default Input Field
Input Column Sizing
Control Sizing Options
XLarge Input class .input-xl
XLarge Input class .input-xl
for select
Large Input class .input-lg
Large Input class .input-lg
for select
Small Input class .input-sm
Small Input class .input-sm
for select
XSmall Input class .input-xs
XSmall Input class .input-xs
for select