Simple CSS to make Select2 widgets fit in with Bootstrap

Downloads in past


68851.4.68 years ago9 years agoMinified + gzip package size for select2-bootstrap-css in KB


forked for Bootstrap 3.
Demonstrations available at
Tested with Bootstrap v3.3.2 and Select2 v3.3.2, v3.4.1-v3.4.5, v3.5.1, v3.5.2, master
in latest Chrome, Safari, Firefox, Opera (Mac) and IE8-IE10.
Bower: bower install select2-bootstrap-css npm: npm install select2-bootstrap-css
Known issues
box-shadow for .select2-search input do not fit Bootstrap's defaults the Select2 dropdown could inherit look-and-feel from Bootstrap dropdowns and/or could honor Bootstrap height sizing classes checkboxes and radio-buttons in "Bootstrap input groups" could be vertically aligned to the top (instead of center) if combined with a multi Select2 to address variable height of the Select2 container
Fix wrong version number in distribution sources.
Built on Bootstrap 3 v3.3.2 and corresponding bootstrap-sass.
Don't hardcode :focus box-shadow colour (#58).
Removed gradient for .select2-dropdown-open.select2-drop-above [class^="select2-choice"] in IE <= 9; really fixes #35.
Removed box-shadow for .select2-container.form-control (inherited from Bootstrap's .form-control). Fixed #35. Removed border-left for .select2-arrow (#36). Built on Bootstrap 3 v3.3.1 and corresponding bootstrap-sass. Bower components now live in the default "bowercomponents" folder; ditched grunt-jekyll in favor of grunt-shell. Updated grunt plugins.
Fixed border-radii for .select2-dropdown-open.select2-drop-above (as reported by @rzschech in, and `.select2-dropdown in "Bootstrap input groups with addons". Fixed an issue where using Select2 pre v3.4.2 in combination with Bootstrap v3.2.0 and when using Select2 in a "Bootstrap Input Group with Addons" context would result in the original <select> element not being hidden. Removed trailing comma in bower.json.
First version built on Twitter Bootstrap v3.2.0. Fixes
a bug inherited from Twitter Bootstrap by using its variables which in IE8-IE10 and Firefox caused Select2 widgets in "Bootstrap input groups with radio/checkbox addon" and .input-lg size modifier to be 1px off in height (Bootstrap 3's "input group sizing"-demo at behaved the same for Bootstrap v3.0.0). Updates UI component colors.
Added main and dependencies section to bower.json.
First tagged version of the bootstrap3 branch (as requested in
Original select2-bootstrap-css for Bootstrap 2 by Tom Terrace (@tterrace).
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 Ruby and RubyGems, Jekyll, Bower, node.js, Less and Sass installed, run
npm install && bower install
to install all necessary development dependencies.
grunt copy copies assets from components to _jekyll – use this in case a new version of Twitter Bootstrap or Select2 are out and need to be tested grunt build builds docs grunt serve builds docs and serves them via Jekyll's --watch flag on http://localhost:4000 grunt watch watches for changes in lib/select2-bootstrap.scss (livereload is enabled)
Develop in lib/select2-bootstrap.scss test your changes using grunt watch and grunt serve. Ideally, port your changes to lib/select2-bootstrap.less and make sure tests are passing to verify that Less and Sass compile down to the target CSS via npm test.
Juri Strumpflohner (@juristr) – adding missing display:block