Integration of simple_form with bootstrap 3

Question

I\'ve updated bootstrap to version 3. Everything works fine except the forms which are generated by simple_form gem. I don\'t know how could I integrate these two together. I ca

Answer 1

This gist was very helpful to me:

https://gist.github.com/tokenvolt/6599141

Thanks!

Answer 2

Good news everyone: as of April 2014, Bootstrap 3 integration is more fully supported, with extra wrappers provided in a new release.

We just released Simple Form 3.1.0.rc1 with support to Bootstrap 3. To make it possible, we leveled up the Wrapper API to make it more extensible and to allow developers to directly configure it instead of relying on global state. After such improvements, it was very easy to change the Simple Form configuration to work with Bootstrap 3.

You can see the new functionality in action through an example app here: http://simple-form-bootstrap.plataformatec.com.br/

Answer 3

You need to create a bootstrap specific simple_form setting by creating an initializer in config/initializers and populating with the below content.

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.wrappers :bootstrap, tag: 'div', class: 'control-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

  config.wrappers :prepend, tag: 'div', class: "control-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-prepend' do |prepend|
        prepend.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  config.wrappers :append, tag: 'div', class: "control-group", error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper tag: 'div', class: 'controls' do |input|
      input.wrapper tag: 'div', class: 'input-append' do |append|
        append.use :input
      end
      input.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
      input.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
    end
  end

  # Wrappers for forms and inputs using the Twitter Bootstrap toolkit.
  # Check the Bootstrap docs (http://twitter.github.com/bootstrap)
  # to learn about the different styles for forms and inputs,
  # buttons and other elements.
  config.default_wrapper = :bootstrap
end

Answer 4

Simple form 3.1.0.rc1 has just been released that should solve your integration problems. See the blog post about it on http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/, or just see the latest Simple Form for Bootstrap here: http://simple-form-bootstrap.plataformatec.com.br/.

So if you update your simple form to this version, you should be good.

Answer 5

There's a blog post here http://stabco.tumblr.com/post/59760641051/simple-form-bootstrap3-integration that looks like a good solution. It updates the initializer to suit bootstrap 3.