Select2 4.0.0 Bootstrap theme

Question

In select2 4.0 version there is a theme option. However in the documentation I can't find what does the option mean and how can I create custom theme (https://select2.github.io/examples.html)

I've found bootstrap 3 theme for select2, but it seems to be working only for 3.5 version.

So I could I create custom theme for select2 latest version (4.0)? Basically I need bootstrap 3 styling preferably with LESS file

Answer 1

@fk is working on a Bootstrap 3 theme for Select2 4.0.0.

https://github.com/select2/select2-bootstrap-theme

There is not currently any documentation on creating themes for Select2 4.0.0, but it may help to look at the default theme's SCSS for the selectors.

Answer 2

If you want to use bootstrap styling from Kevin Brown' answer

https://github.com/select2/select2-bootstrap-theme

You add this css file to your page, keep the default select2 styles

<link href="/select2-bootstrap-theme/select2-bootstrap.min.css" type="text/css" rel="stylesheet" />

Then set the theme

$("#elem").select2({theme:"bootstrap"});

Also, use classes .select2-bootstrap-prepend and .select2-bootstrap-append on the .input-group wrapper elements to group buttons and selects seamlessly.