Rails: Using simple_form and integrating Twitter Bootstrap

I'm trying to build a rails app and simple_form looks to be a really useful gem. Problem is that I am using twitter bootstrap css to do the styling and the simple_form doesn't allow you to specify the layout of the html.

Can anyone tell me how I can conform the simple_form html into the format boots开发者_开发百科trap css wants?

Note: This answer only applies to SimpleForm < 2.0

Start with this in config/initializers/simple_form.rb:

SimpleForm.form_class = nil
SimpleForm.wrapper_class = 'clearfix'
SimpleForm.wrapper_error_class = 'error'
SimpleForm.error_class = 'help-inline'

Then there's space missing between the label element and the input, which you can add with this:

label {
  margin-right: 20px;
}

There's probably more, but it's a start.

Simple form 2.0 is bootstrap-aware:

rails generate simple_form:install --bootstrap

I recently had the same problem and tried out the combination of bootstrap-sass and formtastic-bootstrap. It works with the exactly same code as the code for formtastic and shows even error messages as expected.

bootstrap-sass also works with Rails 3.1 Asset Pipeline and Rails 3.0. formtastic-bootstrap is tested with RSpec so I think this is a nice way to go!

I wrote a gem to do exactly this. It's not simple_form, but it should work fine side-by-side: twitter_bootstrap_form_for.

Here's the full config (config/initializers/simple_form.rb):

SimpleForm.setup do |config|
  config.hint_class = 'help-block'
  config.error_class = 'help-inline'
  config.wrapper_class = 'clearfix'
  config.wrapper_error_class = 'error'
  config.label_text = lambda { |label, required| "#{label} #{required}" }
  config.form_class = nil
end

simple_form allows for a css class (Passing in :html => {:class => nil} will result in only a "simple_form" class.).
n.b. This was added on 7/25/2011 so many existing downloads and documentation will not have it. You could also wrap it in a div that specifies a style.

You can also always style an individual element with code such as

<%= f.input :username, :label_html => { :class => 'my_class' } %>

I found this, seems working fine https://github.com/rafaelfranca/simple_form-bootstrap don't known about tight integration

If you use SimpleForm 1.5 the authors of the gem provide you with the required configuration instructions here: https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration

In this railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrap, you can see how to customize simple_form with twitter bootstrap (skip to 3:05).

terminal :

rails g simple_form:install --bootstrap

model/_form.html.erb :

<%= simple_form_for @product, :html => { :class => 'form-horizontal' } do |f| %>
  <fieldset>
    <legend><%= controller.action_name.capitalize %> Product</legend>

    <%= f.input :name %>
    <%= f.input :price %>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
  </fieldset>
<% end %>