Simple Form and Bootstrap sample application.

Here you'll see the usage of Simple Form and the Bootstrap toolkit on a Rails 4 application.

You can check the source code on GitHub.

How to build your Rails application with Simple Form and Bootstrap

Configuring your Rails app with Simple Form and Bootstrap

  1. Create your new Rails application: rails new my_new_app
  2. Open the generated Gemfile and add the Simple Form dependency: gem 'simple_form'
  3. Install the dependencies: bundle install
  4. Install the Simple Form, using the --bootstrap option: rails generate simple_form:install --bootstrap
  5. Now you have a new Rails application using Simple Form and configured to use Bootstrap

Building your first form

Example: Lets build the following form.

Simple Form: Basic Form

Lorem ipsum dolor sit amet

Example block-level help text here.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

The code is straightforward and looks like this:

    
      
<%= simple_form_for @user_basic, url: create_basic_examples_url, as: 'user_basic'  do |f| %>

  <%= f.input :email, placeholder: 'Enter email' %>

  <%= f.input :password, placeholder: 'Password' %>

  <%= f.input :file, as: :file, wrapper: :vertical_file_input %>

  <%= f.input :active, wrapper: :vertical_boolean %>

  <%= f.input :choices, as: :check_boxes,
    collection: [
      'Option one is this and that—be sure to include why it\'s great',
      'Option two can be something else and selecting it will deselect option one'],
      wrapper: :vertical_radio_and_checkboxes %>

  <%= f.input :sex, as: :radio_buttons,
    collection: ['Male', 'Female'], wrapper: :vertical_radio_and_checkboxes %>

  <%= f.button :submit %>
<% end %>

    
  

The code is very simple, isn't it?

But it can get better! We can use the wrapper_mapping option to remove that wrapper duplication. This option receives a Hash containing an input type and the wrapper that will be used for all inputs with specified type.

Example:

      { string: :string_wrapper, boolean: :boolean_wrapper }
    
All the String inputs will now use the :string_wrapper, and the same applies to boolean fields, which will use the :boolean_wrapper for all its inputs. You can see more information about wrapper_mappings here.

    
      
<%= simple_form_for @user_basic, url: create_basic_examples_url, as: 'user_basic',
  wrapper_mappings: {
    check_boxes: :vertical_radio_and_checkboxes,
    radio_buttons: :vertical_radio_and_checkboxes,
    file: :vertical_file_input,
    boolean: :vertical_boolean
  } do |f| %>

  <%= f.input :email, placeholder: 'Enter email' %>

  <%= f.input :password, placeholder: 'Password' %>

  <%= f.input :file, as: :file %>

  <%= f.input :active %>

  <%= f.input :choices, as: :check_boxes,
    collection: [
      'Option one is this and that—be sure to include why it\'s great',
      'Option two can be something else and selecting it will deselect option one'] %>

  <%= f.input :sex, as: :radio_buttons,
    collection: ['Male', 'Female'] %>

  <%= f.button :submit %>
<% end %>

    
  

Simple, right? You can see the code for the other examples on GitHub.