Form Components form components and widgets

Date Pickers
Select date
Select date
Select date
Select month only
Select date range
Datetime Pickers
Time Pickers
Clockface Time Pickers
Color Pickers
Select 2 Dropdowns

Fixed Width


Fluid Width


Advance Samples

Multiple Select
Radio Buttons as Switches(Bootstrap Switch)
Bootstrap Input MaxLength
Maxlength is 25 chars. The badge will show up by default when the remaining chars are 10 or less.
Maxlength is 25 chars. Do you want the badge to show up when there are 20 chars or less? Use the threshold option: threshold: 20
This is a complete example where all the options configured for the bootstrap-maxlength counter are setted. Please note: if the alwaysShow option is enabled, the threshold
Bootstrap maxlength supports textarea as well as inputs. Even on old IE.
The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right. All you need to do is specify the placement option, with one of those strings.
basic example
disabled state
with max value: 10
with step: 5
Bootstrap TouchSpin
basic example
example with decimal steps
Form Tools
Incorrect please try again

Enter the words above Enter the numbers you hear

Note: Please visit to learn more about the Google reCaptcha

Start typing to auto complete!. E.g: California. To use autocomplete feature include: assets/plugins/bootstrap/js/bootstrap2-typeahead.min.js

Type a username(E.g: user1, user2) and check its availability.
Type a username(E.g: user1, user2) and check its availability on focus lost
Type a password to check its strength
IP Address Input
Input Masks
change the placeholder
multi-char placeholder
(999) 999-9999
mask "9" or mask "99" or ... mask "9999999999"
123456 => € ___.__1.234,56
123456 => € ___.__1.234,56(left aligned)
999-99-9999. remove the empty mask on blur or when not empty removes the optional trailing part
Tags Input
Advanced File Input
Select file Change Remove
Select file Change
Select image Change Remove
NOTE! Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only
Bootstrap Markdown Editor

This is some editable heading

Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!

Click above content to edit it
Fixed widthe set with data-width="400" html attribute