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. 🙂
Jeff Mould
Latest posts by Jeff Mould (see all)
- Laravel 5.4 Redirect after Password Reset Email Sent - September 8, 2017
- How to Fix Laravel 5.2 Token Mismatch Errors - June 30, 2016
- How to Get Sirius XM Deals - May 27, 2016
