Rails 4 form builder with comprehensive support for Twitter Bootstrap 3 [closed]

Answer 1

In my own experience with Bootstrap and simple_form / form_builder approach is that simple_form is not worth the trouble. There are just too many things that simple form has no answer for layout and control wise, some key black spots being classes on wrapper tags, selects with html attributes, or doing something simple like bootstrap button groups that mimic toggle/radio buttons. The i18n support in simple_form has also been a challenge, requiring a lot of duplication.

Also consider if server side rendering is the right approach for a modern application. I am transitioning from traditional rails/server-side rendering to a SPA (Single Page Application) model. To do this I'm using backbone.js and marionette with eco templates and coffeescript.

Architecturally the simple_form / rails form builder approach seems kind of flawed and within it has a lot of convoluted code for essentially building a html string fragment.

Well I say that is what view templates are for!

At the end of the day a view is composed from many different sub-view templates (eg partials), and I think it should go right down to control/field components. In contrast, the builder approach is always caught out with lack of support for different jquery components and is not really agile enough to keep pace.

I'd suggest using parameterised view templates/partials that codify the markup you want for each type of control/component or view construct in your app and simply compose them to get the layout you want. If you're doing this server side, you could wrap up all the render partial calls with some helpers for syntactical sweetness. If you're doing it client side with say eco templates, check the main page, you will see an example of defining and calling form building templates there.

Don't lock yourself into the capabilities of a form builder, use the boostrap documentation examples as the starting point for your templates and simply call them!

Answer 2

Have you checked out https://github.com/potenza/bootstrap_form? We just added support for Bootstrap 3 and it's very lightweight.

We support almost all of your requirements, but we're still working on a good solution for date and time selects as they are currently stacked by default.

Here's an example form in erb:

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

And the output:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" id="user_email" name="user[email]" type="email">
  </div>
  <div class="form-group">
    <label for="user_password">Password</label>
    <input class="form-control" id="user_password" name="user[password]" type="password">
  </div>
  <div class="checkbox">
    <label for="user_remember_me">
      <input name="user[remember_me]" type="hidden" value="0">
      <input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1"> Remember me
    </label>
  </div>
  <input class="btn btn-default" name="commit" type="submit" value="Log In">
</form>

Answer 3

Having tried this recently, there are some hacks to get simple_form working, I would say that it's not ready yet for primetime. Check back on simple form in a few weeks, in the mean time you could build your markup manually or live with awkward forms with simple_form till it's updated.

You can monitor it's progress here: https://github.com/rafaelfranca/simple_form-bootstrap/pull/28