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

Comments

  1. Viral says

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">