Integrate Bootstrap 3 into simple_form using haml on Rails 4

Question

I think I have a simple enough question here but just can't seem to find the answer.

I have used Bootstrap 3 signin form HTML/CSS/Javascript from bootsnipp.com and am now converting it so it works with my existing haml/simple_form/Rails 4 application.

My original code was

  = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
  .form-inputs
    = f.input :email, :required => false, :autofocus => true
    = f.input :password, :required => false
    = f.input :remember_me, :as => :boolean if devise_mapping.rememberable?
  .form-actions
    = f.button :submit, "Sign in"
= render "devise/shared/links"

and I am trying to incorporate that into the new code

.container  
  #loginbox.mainbox.col-md-6.col-md-offset-3.col-sm-8.col-sm-offset-2{style: "margin-top:50px;"}
    .panel.panel-info
      .panel-heading
        .panel-title Sign In
        %div{style: "float:right; font-size: 80%; position: relative; top:-10px"}
          = link_to "Forgot your password?", new_password_path(resource_name)
      .panel-body{style: "padding-top:30px"}
        #login-alert.alert.alert-danger.col-sm-12{style: "display:none"}
        %form#loginform.form-horizontal{role: "form"}
          .input-group{style: "margin-bottom: 25px"}
            %span.input-group-addon
              %i.glyphicon.glyphicon-user
            %input#login-username.form-control{name: "username", placeholder: "username or email", type: "text", value: ""}/
          .input-group{style: "margin-bottom: 25px"}
            %span.input-group-addon
              %i.glyphicon.glyphicon-lock
            %input#login-password.form-control{name: "password", placeholder: "password", type: "password"}/
          .input-group
            .checkbox
              %label
                %input#login-remember{name: "remember", type: "checkbox", value: "1"}/
                Remember me
          .form-group{style: "margin-top:10px"}
            / Button
            .col-sm-12.controls
              = link_to session_path(resource_name) do
                #btn-login.btn.btn-success Login

I figured out the forgotten password bit because it was simply a case of throwing the link_to into replace the %a tag but I am stumped on the simple_form_for(resource... bit.

Specifically, for lines like this

= f.input :password, label: false, :required => false

How to I add what was in bootstrap line

%input#login-password.form-control{name: "password", placeholder: "password", type: "password"}/

So I want to add the div class 'input', id 'login-password' and class 'form-control' to my simple_form code. I have tried both :html => {:class => 'form-horizontal' } and input_html: { class: 'special' } but it just doesn't seem to work and the explanation on Github doesn't specify whether the rule changes if you are applying multiple classes, ids etc to the one line of code.

Since posting this question I am about half way through the conversion and my current code looks like

    .container  
  #loginbox.mainbox.col-md-6.col-md-offset-3.col-sm-8.col-sm-offset-2{style: "margin-top:50px;"}
    .panel.panel-info
      .panel-heading
        .panel-title Sign In
        %div{style: "float:right; font-size: 80%; position: relative; top:-10px"}
          = link_to "Forgot your password?", new_password_path(resource_name)
      .panel-body{style: "padding-top:30px"}
        #login-alert.alert.alert-danger.col-sm-12{style: "display:none"}
        = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
          %form#loginform.form-horizontal{role: "form"}
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-user
              = f.input :email, :required => false, label: false, :autofocus => true, placeholder: '@usgboral.com', input_html: { class: 'form-control' }
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-lock
              = f.input :password, label: false, :required => false
            .input-group
              .checkbox
                %label
                %input#login-remember{name: "remember", type: "checkbox", value: "1"}/
                = f.input :remember_me, :html => {:id => 'login-remember' }, :as => :boolean if devise_mapping.rememberable?
                Remember me
            .form-group{style: "margin-top:10px"}
              .form-actions.col-sm-12.controls
                = f.button :submit, "Login", :html => { :id => 'btn-login', :class => 'btn btn-success' }

Answer 1

.container  
  #loginbox.mainbox.col-md-6.col-md-offset-3.col-sm-8.col-sm-offset-2{style: "margin-top:50px;"}
    .panel.panel-info
      .panel-heading
        .panel-title Login
        %div{style: "float:right; font-size: 80%; position: relative; top:-10px"}
          = link_to "Forgot your password?", new_password_path(resource_name)
      .panel-body{style: "padding-top:30px"}
        #login-alert.alert.alert-danger.col-sm-12{style: "display:none"}
        = simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
          %form#loginform.form-horizontal{role: "form"}
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-user
              = f.input :email, :required => false, label: false, :autofocus => true, placeholder: 'username or email', input_html: { class: 'form-control' }
            .input-group{style: "margin-bottom: 25px"}
              %span.input-group-addon
                %i.glyphicon.glyphicon-lock
              = f.input :password, label: false, :required => false
            -#.input-group
              .checkbox
                %label#login-remember
                  = f.input :remember_me, class: "input", type: "checkbox", :as => :boolean if devise_mapping.rememberable?
            .form-group{style: "margin-top:10px"}
              .form-actions.col-sm-12.controls
                = f.button :submit, "Login", id: "btn", class: "btn btn-success"