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. :)

Follow me

Jeff Mould

Social Impact Entrepreneur at Haphire, Inc.
Born in Maryland, lives in Delaware, Starbucks addict, student, entrepreneur, and information technology professional. Jeff has been passionate about computers, technology, and the Internet since before he can remember. He blogs about programming and technology in general. Read more about Jeff Mould or follow him on Twitter.
Follow me

Latest posts by Jeff Mould (see all)

  • 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..

  • dipti

    hii i include this css file into my html still it is not working,…