Adding Twitter bootstrap styling to Rails form helpers - ruby-on-rails

Question

After reading the answer which suggested I use Simple_form gem with bootstrap integration, I installed it and created my form according to simple_form instructions, but the input boxes are floating right.
This is the layout. The form is being called with the partial 'shared/reg'
<div class="container">
<div class="row">
<div class="span8"><%= yield %></div>
<div class="span4">
<%= render 'shared/reg' %>
</div>
</div>
</div>
This is my simple form form
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
<%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %>
<%= f.input :email %>
<%= f.input :image, :as => :file %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<%= f.button :submit %>
<% end %>
Below you can see how the input boxes are floating right in relation to the submit button.
Update

Answer 1

Rather than using the .form-actions class, which wraps the submit button in gray block (which might not work for your page design), you can also wrap the button in a control group like this:
<div class="control-group">
<div class="controls">
<%= f.button :submit %>
</div>
</div>
This is only really needed if you're using the .form-horizontal class on the form itself.
If you're looking for a drop-in replacement form builder that outputs bootstrap-style markup for Rails, you might want to check out a gem that I put together to handle this sort of thing:
https://github.com/potenza/bootstrap_form
Here's how you'd setup a horizontal-style form with the submit button properly lined up:
<%= bootstrap_form_for(#user, html: { class: 'form-horizontal' }) do |f| %>
<%= f.text_field :email %>
<%= f.password_field :password %>
<%= f.password_field :password_confirmation, label: 'Confirm Password' %>
<%= f.control_group do %>
<%= f.primary "Save User" %>
<% end %>
<% end %>
This is the example output:
<form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post">
<div class="control-group">
<label class="control-label" for="user_email">Email</label>
<div class="controls">
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="user_password_confirmation">Confirm Password</label>
<div class="controls">
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" name="commit" type="submit" value="Save User" />
</div>
</div>
</form>

Answer 2

You should try the following:
<%= form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
<legend>User Registration</legend>
<div class="control-group">
<%= f.label :name, class: "control-label" %>
<div class="controls">
<%= f.text_field :name %></p>
</div>
</div>
<div class="form-actions">
<%= f.submit %>
</div>
</fieldset>
Note that the bootstrap uses some specific selectors for some classes / html elements, so that if you forget to add an element or a class, everything else will be messed up... In this aspect there's no leeway.
On a side note, you should definitely try simple_form, and the bootstrap integration. It will make your life easier.
Update:
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
<legend>User Registration</legend>
<%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
<%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %>
<%= f.input :email %>
<%= f.input :image, :as => :file %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<div class="form-actions">
<%= f.submit %>
</div>
</fieldset>
<% end %>