Skip to content

Twitter Bootstrap integration

Oskar Pearson edited this page Jun 23, 2019 · 5 revisions

Twitter Bootstrap integration

SimpleForm 2.0

Use the simpleform bootstrap generator

rails generate simple_form:install --bootstrap

Disclaimer - SimpleForm 2.0

We are working on the Twitter Bootstrap integration on the master branch. You can see an example application here: https://github.com/rafaelfranca/simple_form-bootstrap

We would be very happy if you could use Simpleform master and open up issues for whatever you find!

If you want to try another solution in the section below has a tutorial about integration with SimpleForm 1.5 made by our contributors.

Simple Form 1.5

How

Instructions for (probably half-baked) Twitter Bootstrap integration (SimpleForm 1.5):

  1. Create lib/simple_form/contained_input_component.rb with the following code:
# frozen_string_literal: true
module SimpleForm 
  module Components 
    module ContainedInput 
      def contained_input 
        '<div class="controls">' + input + (error.nil? ? '' : error) + '</div>'
      end 
    end 
  end 
  
  module Inputs 
    class Base 
      include SimpleForm::Components::ContainedInput
    end 
  end 
end
  1. In config/initializers/simple_form.rb, modify options like this (via http://stackoverflow.com/questions/7198109/rails-using-simple-form-and-integrating-twitter-bootstrap#answer-7300806):
  config.components = [ :label, :contained_input ]
  SimpleForm.wrapper_class = 'control-group'
  SimpleForm.wrapper_error_class = 'error'
  SimpleForm.label_class = 'control-label'
  SimpleForm.error_class = 'help-inline'
  SimpleForm.form_class = 'form-horizontal'
  1. Add the following to the end of config/initializers/simple_form.rb (before the last end):
require 'simple_form/contained_input_component.rb'