simple css to make select2 widgets fit in with bootstrap

  • By Tom T
  • Last update: Nov 26, 2022
  • Comments: 12

Select2 Bootstrap CSS

Simple CSS to make Select2 widgets fit in with Bootstrap.

  • This branch (master) contains the legacy version for Bootstrap 2.
  • The legacy bootstrap 3 branch is here: bootstrap3 branch.*

The LESS file is located at lib/select2-bootstrap.less, and the SCSS file is located at lib/select2-bootstrap.scss.

Tests are included to verify that LESS and SCSS compile down to the target CSS. To run the tests, you'll need to install node.js, Less, and SASS. Then you can run:

npm install && bower install
npm test

Notable Changes

Versions prior to 1.2.0 included a default width for select2 containers. Applying the class "input-default" to your select will line the select2 container up with a default bootstrap text input.


This library can also be used as a Compass plugin.


gem 'select2-bootstrap-css'


require 'select2-bootstrap-css'

Your scss file:

@import 'select2-bootstrap';




  • 1

    Select2 not respecting parent width.

    Problem: When you select an option that is larger than the Select2, the control would expand itself to fit the newly selected option, even if it means exceeding the width of the parent container.

    Expected outcome: If the selected option is large, then the text content should become clipped and text ellipsis should be visible.

    You can see this in the demonstration website if you manually adjust any of the Select2 controls width to an arbitrary small value and then proceed to selecting any options.

  • 2

    select2 4.0

    Hey fk/t0m, select2 is in new 4.0 beta. Still not finished but i'm very exited if you will make an update to this. Select2 now supports a special theme option. May this becomes very handy ;)

    Regards Nyro

  • 3

    Maintainer and ownership at question

    This is directed specifically to @fk

    Are you the publisher of and (if so) do you have plans to keep your branch here published on

  • 4

    Multiselect and responsive bootstrap

    This is the best solution for implementing select2 in bootstrap I've seen until now!

    Unfortunately it doesn't allow yet for the responsive functionality of Bootstrap. Would it be possible to add that, so that when screen-width is max. 767px, the multiselect container gets a 100% width?

  • 5

    Select2 component rendering in Modal dialog

    Is this issue solved in this select2-bootstrap-css component?

  • 6

    Support for "input-append"


    I'm trying to use the "input-append" control from Bootstrap with Select2 but the appended button is shown very distant from the Select2 component.

    Here is the Fiddle reproducing the problem:

    I would be very nice to support this use case.

  • 7

    Input :focus box-shadow colour

    As far as I can tell, the colour of a focused input's box-shadow is hardcoded to rgba(82, 168, 236, 0.6).

    With bootstrap.less, you can modify the colour with @input-border-focus. Would it be possible to add this functionality?

    I modified it in the following way for my project, but do not know this project and LESS well enough to know if this is a safe change:

    .select2-container-active .select2-choice,
    .select2-container-multi.select2-container-active .select2-choices {
      @color-rgba: rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6);
      border-color: @input-border-focus;
      outline: none;
      @shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px @color-rgba;
      @transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  • 8

    Bootstrap validation states

    The bootstrap 3 select2-bootstrap.css has a comment that says:

     * Address Bootstrap's validation states and change Select2's border colors and focus states.
     * Apply .has-warning, .has-danger or .has-succes to #select2-drop to match Bootstraps' colors.

    If I apply .has-error to .select2-drop it doesn't work quite right:

    The border of the drop changes to red, but the upper part...the part above the Select2 search box...which has the class .select2-container stays the standard bootstrap blue.

    If I move the section of css dealing with the validation states below the section dealing with active states, it then works.

  • 9

    create and push the v1.3.0 tag

    Hey t0m,

    Just an FYI, people who use package managers like bower or any other package/dependency manager that looks for specific git tags for every release are missing out on the 1.3.0 release on the bootstrap3 branch. There is no tag in @fk's repo either.

    I ended up forking the repo and creating the tag from t0m's 1.3.0 commit on the bootstrap3 branch. Just thought I'd let you two know.

    Thanks for your contribution!

  • 10

    Added LESS and SASS templates

    Included are some tests to show that LESS and SASS are generating the right CSS. The test output from LESS includes the mixins, because LESS has no way to exclude mixin classes from the output.

  • 11

    background-color and possibility to use bootstrap and default style side by side


    first of all, thanks for your great work! But in my opinion if found a bug, because you use background: none, the select box look different on each background, which looks a littlebit ugly.

    I have a white page and on that page is a bootstrap "well" in which I use a select2, now this select2 have grey background and select2 boxes under that "well" have a white background, for me they should all look the same, white in that case.

    A nice new feature would be if I would have the possibility to enable the bootstrap theme on a select2 with an option or so, so that I can use both styles on one page.

    Kind regards

  • 12

    select2 and input-prepend

    When placing a select2 next to a bootstrap input-prepend addon, the select2 is not styled properly. It needs:

    • no rounded corners on the left side (right side for input-append)
    • same height and padding as the add-on

    For this, with default bootstrap variables I am using this css:

    .input-prepend .select2-container .select2-choice{
    .input-prepend .select2-container .select2-choice{
        border-radius: 0 4px 4px 0;

    In terms of bootstrap variables, the 14px and 20px are clearly @baseFontSize and @baseLineHeight.. not sure what the 4px padding I found by trial and error should be defined as...