In this guide we are going to work on updating the styling for our sign in forms provided by Devise. The log in form that we have now is pretty ugly, so let's improve the overall look and feel.

To start out, go to the views/devise/sessions directory, and open the file called new.html.erb. This file has the code for your log in page.

Now, let's add class: "form-horizontal" to the form tag. Next, change the class of each div to "form-group".

Next, update the style of the "Log in" button. Then, add the class control-label to both the "password" and "remember me" labels. Likewise, add the class form-control to the email and password fields.

I want the email and password fields to be much shorter in the browser. Let's put the entire form element into a <div> tag, and then add a class to it called col-md-4. This leverages the Bootstrap grid layout and will take up 4 columns.

Here is the complete code:

<!-- app/views/devise/sessions/new.html.erb -->

<h2>Log in</h2>

<div class="row">
  <div class="col-md-4">
    <%= form_for(resource, as: resource_name, url: session_path(resource_name), class: "form-horizontal") do |f| %>
      <div class="form-group">
        <%= f.label :email %><br />
        <%= f.email_field :email, autofocus: true, class: "form-control" %>
      </div>

      <div class="form-group">
        <%= f.label :password, class: "control-label" %><br />
        <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
      </div>

      <% if devise_mapping.rememberable? -%>
        <div class="form-group">
          <%= f.check_box :remember_me %>
          <%= f.label :remember_me, class: "control-label" %>
        </div>
      <% end -%>

      <div class="form-group">
        <%= f.submit "Log in", class: 'btn btn-primary' %>
      </div>
    <% end %>

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

That's it. If you refresh the browser, you can see a much-better looking form.

Resources

• Code at this stage