select2-bootstrap-theme

Default textbox

Select2 single select

Select2 multi select

Select2 append Checkbox

Select2 multi append Radiobutton

Select2 append

Select2 prepend

Select2 multi append

Select2 multi prepend

Select2 multi append + prepend

… is my favorite!

The theme offers styles to display "small" and "large" Select2 widgets in Bootstrap Input Groups with Bootstrap Control Sizing classes applied (e. g. Select2 in .input-group.input-group-sm or .input-group.input-group-lg). You may also apply the Bootstrap Control Sizing classes directly to the .select2-container to alter its appearance.

Requires select2.full.js

Those of you familiar with Select2 v3 remember that the default behavior was to copy the original elements CSS-classes to the container of the Select2 element. Select2 v4 provides a similar functionality in its full build, select2.full.js. It contains a compatibility module which behaves similar to v3 in copying CSS classes from the original <select> element. To invoke, set the containerCssClass option to :all:.

col-md-4

RTL support via dir="rtl"

col-md-3

Bootstrap input

col-md-3

col-md-4

Example block-level help text.

col-md-3

Bootstrap input

col-md-3

col-md-4

col-md-3

Bootstrap input

col-md-3

Horizontal form group sizes

The theme's styles work in Bootstrap's Horizontal Forms and offers support for Horizontal Form Group Sizes, too.

Tests for Select2 widgets used in context with Bootstrap's Button Addons.

Select2 custom data load

col-md-5

Select2 custom data load

col-md-5

Select2 custom data load

col-md-5

The theme applies Bootstrap's styles for disabled input elements and for disabled dropdown options to the Select2 widgets and its options. Also see Select2's documentation on its "Disabled mode".

Select2 single

Select2 multiple

Input Groups

RTL Support and Bootstrap Control Sizing

Requires select2.full.js

Horizontal form group sizes

Inline Forms

Button Addons

Disabled inputs and options