How to apply bootstrap css to simple_form_for form in rails?

Question

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

rorra · Accepted Answer · 2013-03-02 10:06:47Z

3

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 %>

answered Mar 2, 2013 at 10:06

rorra

9,6883 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 2, 2013 at 10:05

Manoj Monga

3,08317 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to apply bootstrap css to simple_form_for form in rails?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related