1

The following command integrates simple_form with twitter-bootstrap

$ rails g simple_form:install --bootstrap

  identical  config/initializers/simple_form.rb

  create  config/initializers/simple_form_bootstrap.rb

  exist  config/locales

  identical  config/locales/simple_form.en.yml

  identical  lib/templates/erb/scaffold/_form.html.erb
===============================================================================

  Be sure to have a copy of the Bootstrap stylesheet available on your
  application, you can get it on http://twitter.github.com/bootstrap.

  Inside your views, use the 'simple_form_for' with one of the Bootstrap form
  classes, '.form-horizontal', '.form-inline', '.form-search' or
  '.form-vertical', as the following:

    = simple_form_for(@user, html: {class: 'form-horizontal' }) do |form|

===============================================================================

But I want to integrate my simple_form with bootstrap 3. What is the command used for this?

Sam
  • 5,040
  • 12
  • 43
  • 95

1 Answers1

3

It's a little tricky to get Bootstrap 3 to work properly with SimpleForm, but the instructions on this page work pretty well for me, almost verbatim:

Using Twitter Bootstrap 3 with simple_form

(I'm using Rails 3.2, but I think they will work equally well for Rails 4. YMMV.)

Here's the key points:

  1. Modify the simple_form.rb initializer by adding col-lg-2 to the config.label_class declaration
  2. Modify the simple_form_bootstrap.rb initializer by changing all instances (3) of "control-group" to "form-group", and all instances (3) of "control" to "col-lg-10"
  3. Add an additional initializer (load before your existing simple_form initializers!) to modify classes on the inputs themselves.

And, of course, don't forget to restart your rails server to pickup the changes.

dlehman
  • 338
  • 2
  • 8
  • #2) It's not `control`, but `controls` that should be changed to `col-lg-10`. Just in case anyone was wondering. – ahnbizcad Sep 02 '14 at 18:33
  • 1
    @gwho This is just following the [article I mentioned](http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form). Create a new file in "config/initializers/remove-this-sf_bs3_inputs.rb". The filename doesn't matter, but initializers are loaded alphabetically, so give it a name so it appears ahead of "simple_form_bootstrap.rb". Just copy the content at the bottom of the article that begins with `inputs = %w[...` – dlehman Sep 03 '14 at 20:29