Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Josephin Doe
Generic placeholder image

hello Datta! Will you tell me something

about yourself?

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image

can you help me?

8:20 a.m.

Switches
Add class of .form-control with <input> tag
Default Switch

Alternative Switch

Primary Switch

Danger Switch

Success Switch

Warning Switch

Info Switch

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

Radio Fill Button

Inline Button

Inline fill Button

Primary Radio

Radio fill Button

Inline Button

Inline fill Button

Danger Radio

Radio fill Button

Inline Button

Inline fill Button

Success Radio

Radio fill

Inline

Inline fill

Warning Radio

Radio fill

Inline

Inline fill

Info Radio

Radio fill

Inline

Inline fill

Checkbox
Add class of .form-control with <input> tag
Default checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Primary checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Danger checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Success checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Warning checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Info checkbox

Bordered checkbox

Inline checkbox

Bordered checkbox

Bootstrap Tags Input
Add class of .form-control with <input> tag
Markup

Just add data-role="tagsinput" to your input field to automatically change it to a tags input field.

True Multi Value

Use a <select multiple /> as your input element for a tags input, to gain true multi value support. Instead of a comma separated string, the values will be set in an array. Existing <option />elements will automatically be set as tags. This makes it also possible to create tags containing a comma.

Typeahead

Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js. An example of using this is shown below.

Categorizing Tags

You can set a fixed css class for your tags, or determine dynamically by providing a custom function.

Objects As Tags

Instead of just adding strings as tags, bind objects to your tags. This makes it possible to set id values in your input field's value, instead of just the tag's text.

bootstrap Maxlength
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-right'.

Also Working With Textarea

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