sQuare

Please Wait

Bootstrap Select

A jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard select elements.
Official documentation

Select picker

Basic

data-provide="selectpicker" applies to a <select>


With optgroups



Multiple

Add multiple attribute


Live search

Add data-live-search="true"


Limit selection

Add multiple data-max-options="2"



Or for optgroup add data-max-options="2"


Placeholder

Add title attribute



Multiple example


Selected text

Add title attribute to <option>


Subtext

Add data-subtext="..." to <option>


Checkmark

Add class .show-tick


Style individual options

Use classes and styles in <option>


Width using bootstrap grid

Using data-width

Add data-width="auto"

Add data-width="fit"

Add data-width="200px"

Add data-width="75%"


Options icon

Add data-icon="fa fa-user" to <option>


Custom content

Add data-content="..." to <option>


Select/deselect all options

Add data-actions-box="true"


Divider

Include <option data-divider="true"></option> in options


Menu header

Add data-header="..."


Disabled

Add disabled attribute

Types

Select pickers support all kind of input types.






Date and Time pickers

Variety of date, time and colock pickers are available in WrapAdmin.
Official documentation

Single date picker

data-provide="datepicker" applies to .form-control


Multi date picker

data-date-multidate="true"


Inside input group

Daterange picker
From To

Clockpicker Official documentation

Default

data-provide="clockpicker" applies to .form-control


Auto close

data-autoclose="true" applies to data-provide="clockpicker"


Input group

Placement

Time picker Official documentation

Default

data-provide="timepicker" applies to .form-control


24 hours

data-show-meridian="false"

Picker color

Give ability of choosing a color in different ways to your users.
Official documentation

Default

data-provide="colorpicker" applies to <input>


Brightness

Include data-control="brightness"


Wheel

Include data-control="wheel"


Positions

Include data-position="top left"


RGBA

Swatches

Hidden input

Inline

Color selector

Basic

Multi select

Inverse colors

Sizes




Rating Select

Star rating, or actually any rating and toggler component.

Rating

Basic

Scored

Read only

More elements

Sizing



Custom icons



Remove rating

Toggleable

Coloring

By default. the color is primary. You can change it by applying .rating-* to .rating which * is any available color name.



Try other colors