In Rails 3, using Formtastic 2, how can I replace the built in ordered list with div's?

Question

In my Rails 3 application I'm using Twitter Bootstrap as a frame work for developing an in house project management system. I'm using Formtastic to help me with forms since it save a lot of time and code. My problem is getting the Formtastic code to output the forms in a way that correspond with Bootstrap's conventions. I've read a few items I found on Google suggesting that I should monkey patch Formtastic, but I haven't been able to do this successfully.

How can I customize Formtastic's output to use div's around each field so I can use Bootstrap with it?

Thank you for looking.

Answer 1

You can use the formtastic-bootstrap gem. You should be able to drop this in and it will generate HTML that will work naturally with Twitter Bootstrap.

Answer 2

Well, today I tried forking formtastic and making it compatible with bootstrap... The markup is incredibly tightly coupled to the code, so I gave up and switched to simple_form instead. Works fine with the advice in Rails: Using simple_form and integrating Twitter Bootstrap

Answer 3

If you use the SCSS files from the one of the scss-twitter-bootstrap projects, you can simply comment out or remove the include for the forms part of the CSS.

Simply copy them in to app/stylesheets (Rails 3.0) or app/assets/stylesheets and comment out:

// @import "forms.scss";

Don't forget to add the formtastic CSS back in:

<%= stylesheet_link_tag 'formtastic', 'formtastic_changes' %>