How to use Twitter bootstrap with simple_form

Edit April 24th 2014: This is too old to be still relevant. There's even new versions of bootstrap, so don't trust the content in this article. Edit 2012-07-03: As you can see in the comments, simple_form has build it support for bootstrap. And built in a much better way than this. Check the wiki to see how to make it work.

I Twitter’s bootstrap. It’s easy to use and perfect to start your new applications with a good result. It provides some basic CSS tools like a grid system together with some other fancy things.

However it has a small problem. You cannot make it work with a Rails application out of the box. Don’t worry, it’s not a big problem. You can make it work with just a bit of hacking here and there.

This are the minimum config options that I’ve found that you need on simple_form to have it working with bootstrap so that it applies the right classes. On fields and wrappers.

We’re almost there… there’s one more step needed. Bootstrap uses an extra div container around each input field. I’m afraid I couldn’t find any way to add this extra wrapper with simple_form, so I ended up with this patch.

So far it works well, we couldn't find any caveats yet… but if you do, or if you find a better way to integrate these pieces of amazing soft, please let me know!

comments powered by Disqus