Bootstrap Rails Form Label Inline Instead of Above Field

Question

I have the following form using this gem for Rails Bootstrap forms: https://github.com/bootstrap-ruby/bootstrap_form

My form code looks like this:

<%= bootstrap_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>

                    <div class="field ">
                      <%= f.email_field :email, label_class: "text-light lead"%>
                    </div>

                    <div class="field">
                      <%= f.password_field :password, autocomplete: "new-password", help: 'A good password should be at least six characters long', label_class: "text-light lead" %>
                    </div>

                    <div class="field">
                      <%= f.password_field :password_confirmation, autocomplete: "new-password", label_class: "text-light lead" %>
                    </div>

                    <div class="actions">
                      <%= f.submit "Sign up" %>
                    </div>
                  <% end %>

I'd like my email label to be inline with the form field rather than above it. Here is an image of what the form looks like with the code above:

How can I accomplish this? Thank you!

score 0 · Answer 1 · answered Dec 26 '22 at 22:11

Did you read the documentation for bootstrap_form? Per: https://github.com/bootstrap-ruby/bootstrap_form#horizontal-forms

<%= bootstrap_form_for(resource, as: resource_name, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10", url: registration_path(resource_name)) do |f| %>
...

Bootstrap Rails Form Label Inline Instead of Above Field

1 Answers1