Loading. Please Wait.

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

On
Off
On Disabled
Off Disabled
Colors Variations

For existing <input> just add a class .js-switch-primary , .js-switch-info etc.

Examples

Switch Primary
Switch Info
Switch Success
Switch Warning
Switch Danger
Sizes

For existing <input> just add a class ."js-switch-small or .js-switch-large .

Examples

Switch Small
Switch Default
Switch Large

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.

Select2 Append Checkbox
Select2 Multi Append Radiobutton
Select2 Append
Select2 Prepend
Select2 Multi Append
Select2 Multi Prepend

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar