Adding space between labels and fields

Question

In my Rails app, the labels for the fields on the login page are way too close to the fields themselves, making it look cramped. I want to add space between them, but am not sure how.

I have Rails 4 with simple_form, bootstrap 3, and devise installed.

This is my app/views/devise/sessions/new.html.erb code:

<div class="row">
<div class="col-xs-4">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>

<fieldset>
  <legend>Log in</legend>
<%= f.input :email %>
<%= f.input :password %>

  <% if devise_mapping.rememberable? -%>
    <div class="field">
           <%= f.input :remember_me, as: :boolean %>
         </div>

</fieldset>
  <% end -%>

  <div class="actions">
    <%= f.button :submit, "Log in" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
</div>

<div class="col-xs-8">
  <h2>Signing in is easy and secure</h2>
</div>
</div>

And here is the entire github repo: https://github.com/yamilethmedina/wheels_registration

I've been looking in my bootstrap.css file and can't find relevant classes. What do you think I should do next?

Answer 1

You could add your own label with space after the custom label.

<%= f.input :email, label: 'Email  ' %>
<%= f.input :password, label: 'Password  ' %>

Or you could use tools like chrome dev tools to inspect the label element to see what class the labels are given and then add some custom css. example .label-class { margin-right: 10px; }