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.
- 40Hi Jeff, I understand you remove my post. I assume you thought it was an advertisement of my site. I just wanted to contribute to the open source community. I am a techie blogger also. you may google me. By the way, I really think it was very cool the css modifications I did to…
- 39In the last article, How To Use WordPress: How to Install WordPress Theme , we went over getting your WordPress theme installed, so now what? Before you start posting to your new blog there a couple more things you will need to do, the first of which is installing and configuring plugins. Plugins are add-on…
- 39UPDATE - February 10, 2014 There were a couple errors in the instructions and code below. I have corrected these errors in a new blog post. Multi Level Drop Down Menu Bootstrap 3 Drop Down Menu Design When Twitter Bootstrap 3 was released one element that was missing was support for multi-level dropdown menus. While…