Making jQuery UI look like Bootstrap
I’m using the Bootstrap UI toolkit for a project I’m working on. I like it quite a bit so far. However, it doesn’t do everything. I wanted a date picker and an autocomplete control that bootstrap doesn’t have. Not being one to do work when I don’t have to, I used the jQuery UI controls.
However.. they looked out of place.
I considered a couple of approaches:
- Manipulate the classes on the elements to match
// too messy - Using a jQuery theme made to look like Bootstrap
// it didn’t look that good on closer inspection - Hacking the jQuery UI styling
// I only wanted to change a few specific pieces - Hack in some CSS to override the jQuery UI styling
// what I ended up doing..
After minutes of deliberation I chose the third approach. It turned out to be a bit tricker than I’d expected.
To save someone else the trouble..
Autocomplete
Adapted from the Bootstrap typeahead.
Calendar
This one required a bit more interpretation.
