Cameron Bass Cameron Bass - 4 months ago 15
CSS Question

Stack edit form with Bootstrap and Rails

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.

enter image description here

Answer

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.