Switchers
Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.
Basic Switchers
For existing <input> just add a class .js-switch.
Examples
Colors Variations
For existing <input> just add a class .js-switch-primary , .js-switch-info etc.
Examples
Sizes
For existing <input> just add a class ."js-switch-small or .js-switch-large .
Examples
Bootstrap Select
Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.
Standard Select Boxes
example
Select Boxes with Optgroups
example
Select Boxes with Optgroups
You can also show the checkmark icon on standard select boxes with the show-tick class:
example
Menu Arrow
The Bootstrap menu arrow can be added with the show-menu-arrow class:
example
Button Classes
You can set the button classes via the data-style attribute:
examples
Limit the Number of Selections
Limit the number of options that can be selected via the data-max-options attribute. It also works for option groups. Customize the message displayed when the limit is reached with maxOptionsText.
examples
Selected Text Format
Specify how the selection is displayed with the data-selected-text-format attribute on a multiple select.
examples
Custom Content
Insert custom HTML into the option with the data-content attribute:
example
Live Search
You can add a search input by passing data-live-search="true" attribute:
examples
Subtext
Add subtext to an option or optgroup with the data-subtext attribute:
example
Icons
Add an icon to an option or optgroup with the data-icon attribute:
example
Select/Deselect All Options
Adds two buttons to the top of the menu - Select All & Deselect All with data-actions-box="true".
example
Select 2 with Select2 Theme
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Single select boxes
Select2 can take a regular select box like this...
Multiple select boxes
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.
Select Success
Select Warning
Select Danger
Disabled mode
Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect.
