Using the Select2 JQuery Plugin with Bootstrap 3

This is going to be a quick post about integrating the Select2 JQuery plugin with Bootstrap 3. Maybe it’s because I have been staring at the same code for over 8 hours now or because I am just an idiot, but I was trying to get Select2 to display properly with Bootstrap 3 and just could not get it right.

If you are not familiar with Select2 it is a JQuery replacement for select boxes. It gives you some added functionality and also makes the select boxes a little more user friendly in my opinion. I encourage you to check it out if you are not familiar. You can see some examples and download the plugin here: http://ivaynberg.github.io/select2

Anyway, the default install of Select2 has some issues with displaying properly with Bootstrap 3. After hours of fighting I finally stumbled upon another developer who had built a CSS plugin to fix these display issues. Obviously I am not the only person with this problem, so in case you are having the same problems, you can check out the CSS here: http://fk.github.io/select2-bootstrap-css/

To get it working just copy the CSS from the download and either append it to the bottom of the select2.css file or create a new file and include it with your HTML.

That is all there is to it. Now if I had only found it 8 hours ago I would have not wasted a night fighting with this issue. :)

  • Chacariad

    thanks! I wish i knew this 10 hrs ago.

  • Raza

    Thanks man.

  • Viral

    I had spent ~2 hrs resolving this issue and then came across your post. Worked like a charm..Thanks buddy for posting it.

  • http://www.emplotime.com Alejandro

    I have implemented the Select2 3.5.2 with bootstrap 3 at my time and attendance web site (Emplotime) after doing minor css adaptations.
    Check out the emplotime demo time clock where I have implemented this.
    Thank you Jeff!
    Please, do not hesitate to ask me what I did.

  • http://www.biznes-partner.eu/kasy-fiskalne_23.html IT

    Thx for your tips :) It will be very helpfully.

  • http://ajaynair.in Ajay

    How do we validate, set tabindex to a select2?

  • Gordon

    thank you very much for sharing!!

  • Tuen Munro

    now I can sleep!

  • Mit

    Does it work with version 4 of select2? I am having some troubles with it..