A Select2 v4 Theme for Bootstrap 3
Demonstrations available at select2.github.io/select2-bootstrap-theme
Built and tested with Bootstrap v3.3.7 and Select2 v4.0.3 in latest Chrome, Firefox and Safari (Mac) and Internet Explorer 11, 10 and 9 (should work in IE8).
You can download select2-bootstrap-theme from this GitHub repo, install it using Bower or npm – required if you want to integrate the Sass or Less sources in your build process – or source the compiled CSS directly from CDNJS or jsDelivr.
You may install select2-bootstrap-theme with Bower, npm or Yarn:
// Bower
bower install select2-bootstrap-theme
// npm
npm install select2-bootstrap-theme
// yarn
yarn add select2-bootstrap-theme
select2-bootstrap-theme is also available on CDNJS and jsDelivr.
select2-bootstrap-theme only works with Select2 v4.x. Applying the theme requires select2-bootstrap.css
referenced after the default select2.css
that comes with Select2:
<link rel="stylesheet" href="select2.css">
<link rel="stylesheet" href="select2-bootstrap.css">
To apply the theme, tell Select2 to do so by passing bootstrap
to the theme
option when initializing Select2:
$( "#dropdown" ).select2({
theme: "bootstrap"
});
You may also set it as the default theme for all Select2 widgets like so:
$.fn.select2.defaults.set( "theme", "bootstrap" );
- Compiled with grunt-sass v2.0.0 (was v1.2.1).
- Merged pull request #54 by @odahcam (and fixed it:
:first-child/:not(:first-child)/:last-child
for.select2-container--bootstrap
won’t play nice in our case; we have to take the original<select>
element (with.select2-hidden-accessible
applied) into account): Select2’s border-radii now are correctly styled in Bootstrap’s “Input Groups” without the need for helper classes (.select2-bootstrap-append
,.select2-bootstrap-prepend
). - Fixed #63: "Cursor position of multiselect in RTL state is in incorrect position"
- Fixed #20: "Select2 inside inline form does not fall back to
display: block
when resizing window to 'extra small'" - Added new Sass/Less variable
$s2bs-btn-default-color
/@s2bs-btn-default-color
– defaults to Bootstrap’s$btn-default-color
/@btn-default-color
. - Docs: Updated AnchorJS to v3.2.2 (was v3.2.1).
- Docs: Fixed layout for mobile devices (add
meta name="viewport" content="width=device-width, initial-scale=1"
). - package.json: Fixed
license
-related npm 2.x “SPDX” warning: for npm 2.x and according to https://docs.npmjs.com/files/package.json#license. - package.json: Added
bugs
.
- Built on Bootstrap 3 v3.3.7 and corresponding bootstrap-sass.
- Prefixed all Sass and Less variables with
s2bs
to avoid conflicts and improve customizability as select2-bootstrap-theme does not "force" you to use (specific) Bootstrap Sass/Less variables anymore; a nice side effect is that we now also provide (a raw) documentation for the inherited Bootstrap variables in one place. - Added Sass and Less variables to override select2-bootstrap-themes default
font-size
,color
and verticalpadding
for.select2-results__group
. [#19] - Added Sass and Less variables replacing hardcoded values in styles for
.select2-selection__clear
,.select2-selection__choice__remove
and.select2-selection__choice
. - Added padding to root level
.select2-results__option
– fixes alignment of.select2-results__message
and.select2-results__option--load-more
. [#28] - Removed
font-family
definition for.select2-container--bootstrap .select2-selection
. [#50] - Added Select2 and Bootstrap as dependencies in
bower.json
– fingers crossed, low hopes. [#52] - Added "repository" to
bower.json
. - Sass is now compiled using LibSass/node-sass instead of Ruby Sass (and grunt-sass instead of grunt-contrib-sass).
- Decreased Sass number precision from 9 to 8 – now Sass numbers really matches its Less counterpart.
- Added Grunt task to compile Less and altered Less test (via grunt-contrib-less).
- Switched Sass and Less source tab size/indention from four to two spaces.
- Updated development dependencies: Autoprefixer to v6.4.0 (was v6.3.6), diff to v2.2.3 (was v2.2.2), grunt-gh-pages to v1.2.0 (was v1.1.0).
- Docs: Added "plain" (not nested in an
<optgroup>
) options to the "State" Select2. - Docs: Updated AnchorJS to v3.2.1 (was v3.1.1), Bootstrap to v3.3.7 (was v3.3.6), jQuery to v1.12.4 (was v1.11.2).
- Docs: Enabled pagination for AJAX examples (in context of #28).
- Docs: Brought back demo pages for different Select2 releases (covering all of 4.0.x via cdnjs).
- Docs: Removed empty
<option>
from the "Select2 multi append Radiobutton" demo (which resulted in problems tracked in 11).
- Fixed bower.jsons "main" field. [#45]
- Do no re-assign the
$form-control-default-box-shadow
,$form-control-focus-box-shadow
, and$form-control-transition
Sass variables if they are already assigned. [#45]
- Fixed version number in distribution files.
- Fixed a bug where math would not compile correctly in Less v2.6.0. [#36]
- Fixed version number for Bower and NPM.
- Docs: Updated AnchorJS to latest version.
- Updated all development dependencies.
- Added Browsersync, Autoprefixer (as required by bootstrap-sass) and scss2less to the build process.
- Built on Bootstrap 3 v3.3.6 and corresponding bootstrap-sass.
- Rewrote the sizing class CSS to work with
containerCssClass
option available with the full Select2 build. [#34] - Added copyright and license information. [#43]
- Added missing styles for
.select2-container--focus
. [#18] - Added support for Bootstrap's
.form-inline
. [#13] - Added basic styles for
.select2-selection__clear
in.select2-selection--multiple
. [#11] - Brought Less source in line with the Sass version and fixed Less patch file and test. [3e86f34]
- Fixed specifity problems with
.form-control.select2-hidden-accessible
.
- Added Less version.
The project offers Less and Sass sources for building select2-bootstrap.css
; both make use of variables from either Bootstrap (Less) or Bootstrap for Sass. The demo pages are built using Jekyll and there are a bunch of Grunt tasks to ease development.
With Jekyll, node.js and Less installed, run
npm install
to install all necessary development dependencies (Sass is compiled vLibSass/node-sass).
grunt build
buildsdocs
grunt serve
buildsdocs
and serves them via Jekyll's--watch
flag on https://localhost:3000
Develop in src/select2-bootstrap.scss
and test your changes using grunt serve
. Ideally, port your changes to lib/select2-bootstrap.less
and make sure tests are passing to verify that both Less and Sass compile down to the target CSS via npm test
.
grunt scss2less
helps in converting the Sass source to its Less counterpart (and overwrites the existing src/select2-bootstrap.less
), but doesn't do the full job – please review the changes to the Less source file and make the necessary adjustments.
The license is available within the repository in the LICENSE file.