Max Length
Add class of .form-control with <input> tag

Default

The badge will show up by default when the remaining chars are 10 or less:

Threshold

Do you want the badge to show up when there are 20 chars or less? Use the threshold option:

Color-lables

Just add color-classwith input

Play With Positions

All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'top-left'.

Also Working With Textarea

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

Default Date-Picker
Add class of .form-control with <input> tag

Date

Add type<input type="date">

Month

Add type<input type="month">

Week

Add type<input type="week">

Date-time-local

Add type<input type="datetime-local">

Time

Add type<input type="time">

Date-Dropper
Add class of .form-control with <input> tag

Default

Add id="#dropper-default"

With Animation

Add id="#dropper-animation"

Date format

Add id="#dropper-format"

Language Support

Add id="#dropper-lang"

Lock Support

Add id="#dropper-lock"

Max Year

Add id="#dropper-max-year"

Min Year

Add id="#dropper-min-year"

Year-range

Add id="#year-range"

Custom Width

Add id="#dropper-width"

Color & Style Dropper
Add class of .form-control with <input> tag

Primary Color

Add id="#dropper-dangercolor"

Background Color

Add id="#dropper-backcolor"

Text Color

Add id="#dropper-txtcolor"

Border-radius

Add id="#dropper-radius"

Border Style

Add id="#dropper-border"

Shadow Color

Add id="#dropper-shadow"

Color Picker
Add class of .form-control with <input> tag

Flat Mode

cancel

Flat Mode With Clear

cancel

No Icon (Input Field Only)


Mini Color
Add class of .form-control with <input> tag

Control Types

Input Modes




Positions

Valid positions include bottom left, bottom right, top left, and top right.

RGB(A)


RGB input can be assigned by setting the format option to rgb.

RGBA input can be assigned by setting the format option to rgb and opacity option to true.

…and more!


Opacity can be assigned by including the data-opacity attribute or by setting the opacity option to true.

CSS-wide keywords can be assigned by setting the keywords option to a comma-separated list of valid keywords: transparent, initial, inherit.

This field has a default value assigned to it, so it will never be empty.

This field will always be uppercase.
Example using Bootstrap's input groups.
Color
Input group example with addon.

Example with swatches.

Example with swatches and opacity.
Default Select
Add class of .form-control with <input> tag

Default Select

Primary Select

Success Select

Info Select

Warning Select

Danger Select

Inverse Select

Range Slider About Ion Range Slider

Data-Skin Modern

Eample : Set diapason from 0 to 5000, Adding postfix ''+'' to max value, Set slider type to double, Dollar symbol as prefix, Enable grid


Data-Skin Flat

Eample : Set diapason from 0 to 5000, Adding postfix ''+'' to max value, Set slider type to double, Dollar symbol as prefix, Enable grid


Data-Skin Flat

Example: Set diapason from 0 to 10, Set fractional step value: 0.1, Enable grid


Data-Skin Flat

Example: Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol as postfix


Data-Skin Flat

Example:Change common slider numbers to custom (Month names). Using values array for that. Array can be any length, Slider will change min and max number automaticaly to fit values array length, Step parameter also will be changed to one, to allow to choose items in values array


Data-Skin Flat

Date Picker About DatePicker

to

Switcher About Switcher



Custom Switch Pure Css



Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.

Chosen Select About Chosen Select

Select 2About Select 2

Date
Add class of .date with data-mask attribute
Time
Add class of .hour with data-mask attribute
Phone no.
Add class of .mob_no with data-mask attribute
Network
Add class of .ip with data-mask attribute
Numbers
Add class of .autonumber with <input> tag
Currency
Add class of .autonumber with data-a-* attribute

Input MaskAbout Input Mask

999-99-999-9999-9
999 99 999 9999 9
999/99/999/9999/9
192.168.100.200
99-9999999
(999) 999-9999
$ 999,999,999.99
dd/mm/yyyy

Color Picker

ClockPicker

A clock-style timepicker for Bootstrap (or jQuery).

Bootstrap Tag Input

jQuery plugin providing a Twitter Bootstrap user interface for managing tags

Basic example with few initial tags

Basic

Supports bootstrap brand colors: .checkbox-primary, .checkbox-info etc.

Checkboxes without label text

Inline checkboxes

Circled

.checkbox-circle for roundness.

Radio

Supports bootstrap brand colors: .radio-primary, .radio-danger etc.

Radios without label text

Inline radios

Credit panel-box

Pay Invoice


Company Form
Basic Form Elements
This is a help text
Please enter your email
Please enter a complex password
Inline Form
Horizontal Form
Please enter your email
Please enter your password
Normal Form
Please enter your email
Please enter your password
Input Grid
Input Sizes
Validation states Form
Validation states with optional icons(deprecated)
Icon/Text Groups
.00
Buttons Groups
Use the grid for big devices! .col-lg-*.col-md-*.col-sm-*
Input Grid for small devices!.col-*
Example Form
Username
Email
Password
Example Form
Example Form