Stack edit form with Bootstrap and Rails

Question

I currently have a form_for that takes in the name, email, and alert_email. I'm using a form-group class and I'm trying to get the form to be stacked instead of inline. There should be an easy way to do this but I can't seem to figure this out. I'll post code for clarity.

FORM PARTIAL:

 <div class="form-group">
  <%= form.label "Name:" %>
  <%= form.text_field :name %>

  <%= form.label "Email:" %>
  <%= form.text_field :email %>

  <%= form.label "Alert Email(optional):" %>
  <%= form.text_field :alert_email %>
</div>

EDIT VIEW:

<%= form_for [ :admin, @user ], html: { class: "form-vertical" } do |form| %>
<%= render form %>

<div class="form-actions">
  <%= form.button class: "btn btn-primary" %>
  <%= link_to "Cancel", [:admin, @user], class: "btn" %>
</div>

SCREENSHOT:

As you can see the form is inline. I simply want the form to be stacked/vertical. Thanks for the help. Let me know if you need to see more code.

Answer 1

Group your label and input tags into separate .form-group tags like so:

<div class="form-group">
 <%= form.label "Name:" %>
 <%= form.text_field :name %>
</div>

<div class="form-group">
 <%= form.label "Email:" %>
 <%= form.text_field :email %>
</div>

<div class="form-group">
 <%= form.label "Alert Email(optional):" %>
 <%= form.text_field :alert_email %>
</div>

Check out this example from the docs .