Devise login with bootstrap in rails

Question

I'm using devise and the log in page is pretty standard so now i'm trying to use a bootstrap template.

Devise code:

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

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

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

and the code template i choose:

<div class="container">
  <form class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>
</div> <!-- /container -->

So how do change this template to use my variables like f.email_field, or did i just have to change the id in the input tag ? i need to use the form_for in the container? i really don't now how to use this template to work the same way.

Answer 1

OK... so there's a few parts to this question.

First, rather than "changing the template to use your variables", I'd take the reverse approach - change your devise code, bit by bit, until the HTML it produces matches the bootstrap sample.

Now, in the bootstrap sample, the class attributes are used for styling - they'll need to stay as they are. The id and for attributes aren't used for styling, and it doesn't matter if those change (ie, devise can pick what it'd like them to be, and you don't have to worry).

So the next step is to go through both code samples, and figure out which bits of the devise code correspond with which bits of the bootstrap code. Then, modify each bit of devise code to more closely match the bootstrap example. I won't go through the entire code sample, but I'll give a few examples:

1

In your devise code, <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> produces a set of form tags in html. So, where are the matching form tags in your bootstrap code? Well, it's <form class="form-signin"> and </form> . So, what you need to do is make sure your devise form adds a form-signin class to it's form tag, so it matches the bootstrap template. the form for doco lets you know that to add a class, you'd do it like this:

<%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "form-signin"}) do |f| %>

(note where I've put class: "form-signin" )

Alright. That's the form tag sorted. Next up, labels:

2

In the devise example, fields are wrapped in <div class="field"> blocks. Your bootstrap template doesn't have them at all - so you can just delete them.

In devise code, <%= f.label :email %><br /> matches to <label for="inputEmail" class="sr-only">Email address</label> in your bootstrap template. So how do you modify the devise code to produce html that's the same as the bootstrap template? Well, you need to remove the <br /> from it, add an 'sr-only' class, and change the label text to 'Email Address'. The documentation will let you know that this can be done with:

<%= f.label :email, 'Email address', class: 'sr-only' %>

3

Next, input fields. <%= f.email_field :email, autofocus: true %> in your devise code corresponds <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> in your bootstrap code. So, you just need to make your devise code add a form-control class. Refer to the doco, or google 'how to add a class to a rails form field', and you'll find it can be done like this:

<%= f.email_field :email, autofocus: true, class: 'form-control' %>

Follow that process all the way through, bit by bit, until the html from your devise code has all the classes / modifications needed to make it look like the bootstrap example.

Final result

The final result will look something like this:

<div class="container">
  <%= form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "form-signin"}) do |f| %>
    <h2 class="form-signin-heading">Please sign in</h2>
    <%= f.label :email, 'Email Address', class: 'sr-only' %>
    <%= f.email_field :email, autofocus: true, class: 'form-control', placeholder: 'Email Address' %>

    <%= f.label :password, 'Password', class: 'sr-only' %>
    <%= f.password_field :password, autocomplete: "off", class: 'form-control', placeholder: 'Password' %>

    <% if devise_mapping.rememberable? -%>
      <label>
        <%= f.check_box :remember_me, label: false %>
        Remember me
      </label>
    <% end -%>

    <%= f.button "Sign in", class: 'btn btn-lg btn-primary btn-block' %>
  <% end %>
</div> <!-- /container -->

But DON'T just copy/paste that. Doing that will keep you a beginner forever. Do it bit by bit yourself until you get it right. Use that final result just as a reference if you really get stuck.

Good luck!

Answer 2

You can add class and id with ruby like this:

<%= f.label :email,'Email address', class: 'sr-only' %>
<%= f.email_field :email, autofocus: true, class: 'form-control', id: 'inputEmail' %>

Bootstrap uses checkbox inputs nested within labels. http://getbootstrap.com/css/#forms You can get around that by just adding an html label tag around your rails style checkbox.

<% if devise_mapping.rememberable? -%>
    <div class="checkbox">
        <label><%= f.check_box :remember_me %> Remember me</label>
    </div>
<% end -%>