title: How to make login form responsive
body: <p>Application uses Bootstrap to create logon form below. In mobile devices logon form is too small, centered in mobile screen, lot of white space. 
  It is difficult to enter user's name and password.</p>
  
  <p>How can I fix this so that the login form looks native in mobile phones also ?
  Or is there some template which can used to create usable logon form for any screen resolution ?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link href="/admin/css/redmond/jquery-ui.css" rel="stylesheet" /&gt;
      &lt;link href="/admin/Content/font-awesome.min.css" rel="stylesheet" /&gt;
      &lt;link href="/admin/Content/bootstrap.css" rel="stylesheet" /&gt;
      &lt;link href="/admin/Content/bootstrap-theme.css" rel="stylesheet" /&gt;
      &lt;title&gt;
          Login
      &lt;/title&gt;
      &lt;script src="/admin/Scripts/jquery-1.11.2.js"&gt;&lt;/script&gt;
      &lt;script src="/admin/Scripts/jquery-ui-1.11.4.js"&gt;&lt;/script&gt;
      &lt;script src="/admin/Scripts/bootstrap.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class='login-box container'&gt;
          &lt;form action="/admin/Account/LogOn" method="post"&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;Login&lt;/legend&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="user"&gt;User&lt;/label&gt;
                      &lt;input autofocus="1" class="form-control" id="user" maxlength="10" name="UserName" placeholder="User" required="True" style="width:auto" type="text" value="" /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="password"&gt;Password&lt;/label&gt;
                      &lt;input class="form-control" id="password" name="Password" placeholder="Password" required="True" style="width:auto" type="password" /&gt;
                  &lt;/div&gt;
                  &lt;div class="checkbox"&gt;
                      &lt;label&gt;
                          &lt;input id="RememberMe" name="RememberMe" type="checkbox" value="true" /&gt;
                          &lt;input name="RememberMe" type="hidden" value="false" /&gt; Remember me
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
              &lt;input type="submit" value='Logon' class="btn btn-primary" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
      $(function() {
          $("input:text:visible:first").focus();
      });
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>HTML5, Bootstrap 3, jQuery, jQuery UI, ASP.NET MVC 4, and Razor are used.</p>