CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapruby-on-rails-4simple-formbootstrap-sass
Sam
Sam

Reputation: 5250

Bootstrap3 and simple form

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?

Upvotes: 1

Views: 469

Answers (1)

dlehman
dlehman

Reputation: 338

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.

Upvotes: 3

Related Questions