Devise login form with form_inline in the navbar

Question

I am trying to make a Devise login form as form_inline in my navbar.

At this point a have made it like this: Link to picture of the navbar it look like a this point: http://postimg.org/image/i3ka5fsur/ it has the code:

<li><%= form_for(:user, :url => session_path(:user)) do |f| %>
      <%= f.text_field :email, :placeholder => "Email" %>
      <%= f.password_field :password, :placeholder => "Password"  %>
      <%= f.check_box :remember_me %><%= f.label :remember_me %>
      <%= f.submit 'Login' %>
    <% end %></li>

I'm just not quite happy with it's look at this point, I more want it like the form_inline: Link to picture of the navbar I want it to look like: http://postimg.org/image/7590n949f/

the form_inline code is:

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
  <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
  </form>

Hope some of you can help me, i'm new a programmering and don't have a lot of experience with programmering.

Answer 1

with twitter bootstrap3

<%= form_for(:user, :url => session_path(:user), html: { class: "navbar-form navbar-right form-inline" }) do |f| %>
        <div class="form-group">
          <%= f.text_field :email, :placeholder => "Email", class: "form-control" %> 
        </div>
        <div class="form-group">
          <%= f.password_field :password, :placeholder => "Password", class: "form-control"  %>
        </div>
        <div class="checkbox">
          <%= f.check_box :remember_me %><%= f.label :remember_me %>
        </div>
        <%= f.submit 'Login', class: "btn btn-default" %>
<% end %>

with twitter bootstrap2

<%= form_for(:user, :url => session_path(:user), html: { class: "navbar-form pull-right form-inline" }) do |f| %>   
        <%= f.text_field :email, :placeholder => "Email", class: "input-small" %> 
        <%= f.password_field :password, :placeholder => "Password", class: "input-small"  %>
        <label class="checkbox">
          <%= f.check_box :remember_me %><%= f.label :remember_me %>
        </label>
        <%= f.submit 'Login', class: "btn" %>
 <% end %>

Answer 2

You should include the css that describes form_inline class and input-small class etc Then in your code you should assign classes to your elements like below

<li><%= form_for(:user, :url => session_path(:user)), :class => "form-inline" do |f| %>
  <%= f.text_field :email, :placeholder => "Email", :class => "input-small" %>
  <%= f.password_field :password, :placeholder => "Password", :class => "input-small"  %>
  <%= f.check_box :remember_me, :class => "checkbox" %><%= f.label :remember_me, :class => "checkbox" %>
  <%= f.submit 'Login', :class => "btn" %>
<% end %></li>