HAML and HTML - Cannot replicate it properly

Question

I'm trying to apply a HTML Bootstrap theme to a Rails application where I use HAML. The result can be found here: https://i.sstatic.net/k2lLG.jpg.

There seem to be some places in the code where I'm not converting it properly. Can you point out where those places might be? I can see in the console that all CSS files are loaded properly. Don't mind the fonts for now.

Thanks!

(It's the Moltran Responsive Admin Theme I'm using)

HAML:

.wrapper-page
  .panel.panel-color.panel-primary.panel-pages
    .panel-heading.bg-img
      .bg-overlay
      %h3.text-center.m-t-10.text-white Sign In to Founderdocs
  .panel-body
    = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
      %fieldset.form-control.input-lg
        .col-xs-12
          = f.label :email
          = f.email_field :email, placeholder: User.human_attribute_name('email'), class: 'form-control'
      %fieldset.form-control.input-lg
        .col-xs-12
          = f.label :password
          = f.password_field :password, placeholder: User.human_attribute_name('password'), class: 'form-control'
      .form-group
        .col-xs-12
          - if devise_mapping.rememberable?
            .checkbox.checkbox-primary
              = f.label :remember_me do
                = f.check_box :remember_me
                Remember me
      .form-group.text-center.m-t-40
        .col-xs-12
          = f.submit t('.sign_in'), class: 'btn btn-primary'
      .form-group.m-t-30
        .col-sm-7
          %i.fa.fa-lock.m-r-5
            = render 'devise/shared/links'
        .col-sm-5.text-right
          %a{:href => "register.html"} Create an account

HTML:

<div class="wrapper-page">
    <div class="panel panel-color panel-primary panel-pages">
        <div class="panel-heading bg-img"> 
            <div class="bg-overlay"></div>
            <h3 class="text-center m-t-10 text-white"> Sign In to <strong>Moltran</strong> </h3>
        </div> 


        <div class="panel-body">
        <form class="form-horizontal m-t-20" action="index.html">

            <div class="form-group">
                <div class="col-xs-12">
                    <input class="form-control input-lg" type="text" required="" placeholder="Username">
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-12">
                    <input class="form-control input-lg" type="password" required="" placeholder="Password">
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-12">
                    <div class="checkbox checkbox-primary">
                        <input id="checkbox-signup" type="checkbox">
                        <label for="checkbox-signup">
                            Remember me
                        </label>
                    </div>

                </div>
            </div>

            <div class="form-group text-center m-t-40">
                <div class="col-xs-12">
                    <button class="btn btn-primary btn-lg w-lg waves-effect waves-light" type="submit">Log In</button>
                </div>
            </div>

            <div class="form-group m-t-30">
                <div class="col-sm-7">
                    <a href="recoverpw.html"><i class="fa fa-lock m-r-5"></i> Forgot your password?</a>
                </div>
                <div class="col-sm-5 text-right">
                    <a href="register.html">Create an account</a>
                </div>
            </div>
        </form> 
        </div>                                 

    </div>
</div>

Answer 1

This is the HAML you required, There are some changes such as, the 'panel-body' should be inside the 'panel-pages' div, and like so. Include the bootstrap-css, I have included in the snippet.see at last link tag.

.wrapper-page
  .panel.panel-color.panel-primary.panel-pages
    .panel-heading.bg-img
      .bg-overlay
      %h3.text-center.m-t-10.text-white
        Sign In to
        %strong Moltran
    .panel-body
      %form.form-horizontal.m-t-20{:action => "index.html"}
        .form-group
          .col-xs-12
            %input.form-control.input-lg{:placeholder => "Username", :required => "", :type => "text"}
        .form-group
          .col-xs-12
            %input.form-control.input-lg{:placeholder => "Password", :required => "", :type => "password"}
        .form-group
          .col-xs-12
            .checkbox.checkbox-primary
              %input#checkbox-signup{:type => "checkbox"}
                %label{:for => "checkbox-signup"}
                  Remember me
        .form-group.text-center.m-t-40
          .col-xs-12
            %button.btn.btn-primary.btn-lg.w-lg.waves-effect.waves-light{:type => "submit"} Log In
        .form-group.m-t-30
          .col-sm-7
            %a{:href => "recoverpw.html"}
              %i.fa.fa-lock.m-r-5
              Forgot your password?
          .col-sm-5.text-right
            %a{:href => "register.html"} Create an account

%link(rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css")            

The link tag is required for bootstrap css to load.Its working for me.