CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-3twitter-bootstrap
iCyborg
iCyborg

Reputation: 4728

How to apply bootstrap css to simple_form_for form in rails?

I have a simple_form like this

<%= simple_form_for(@name) do |f| %>
  <%= f.error_notification %>
  <div class="form-inputs">
    <%= f.input :fname %>
    <%= f.input :lname  %>
    <%= f.input :body %>        
  </div>

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

and I want to make the label horizontal and apply other bootstrap code to it but I am not able to figure out how to do it since simple_form_for do not have any divs like form_for has.

Thanks

Upvotes: 1

Views: 2618

Answers (2)

rorra
rorra

Reputation: 9693

Its well explained on the gem website: https://github.com/plataformatec/simple_form

1) Generate the twitter bootstrap configuration for simpleform, by runnning:

rails generate simple_form:install --bootstrap

2) Follow the examples on the example application: https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/app/views/articles/_form.html.erb

<%= simple_form_for @name, :html => { :class => 'form-horizontal' } do |f| %>

  <%- if f.error_notification %>
    <div class="alert alert-error fade in">
      <a class="close" data-dismiss="alert" href="#">&times;</a>
      <%= f.error_notification %>
    </div>
  <%- end %>

  <div class="form-inputs">
    <%= f.input :fname %>
    <%= f.input :lname  %>
    <%= f.input :body %>        
  </div>

<% end %>

Upvotes: 3

Manoj Monga
Manoj Monga

Reputation: 3083

From the simple_form docs

SimpleForm can be easily integrated to the Twitter Bootstrap. To do that you have to use the bootstrap option in the install generator, like this:

rails generate simple_form:install --bootstrap

You have to be sure that you added a copy of the Twitter Bootstrap assets on your application.

For more information see the generator output, our example application code and the live example app.

NOTE: SimpleForm integration requires Twitter Bootstrap version 2.0 or higher.

Upvotes: 1

Related Questions