title: Bootstrap login not fitting mobile correctly
body: <p>I'm using a template to create a Bootstrap login page and it doesn't want to resize for mobile devices, but instead turns out to be a very tiny login form like this:<br>
  <a href="https://i.stack.imgur.com/zvlEf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvlEf.png" alt="enter image description here"></a> </p>
  
  <p>When it <strong>SHOULD</strong> look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/u6cBg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u6cBg.png" alt="enter image description here"></a></p>
  
  <p>here's my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Login Page&lt;/title&gt;
      &lt;link href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="lib/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="lib/css/signin.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="lib/js/winmarkltd-BootstrapFormHelpers-d4201db/dist/css/bootstrap-formhelpers.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-default"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;h2&gt; Your Company&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="container-fluid formThis"&gt;
          &lt;div style="text-align: center"&gt;
              &lt;h2&gt;Login Here&lt;/h2&gt;
          &lt;/div&gt;
          &lt;form id="loginForm" class="form-signin" action="login.php" method="post"&gt;
              &lt;label for="inputEmail" class="sr-only"&gt;Email address&lt;/label&gt;
              &lt;input type="Username" id="inputEmail" class="form-control" name="username" placeholder="User Name" required autofocus&gt;
              &lt;label for="inputPassword" class="sr-only"&gt;Password&lt;/label&gt;
              &lt;input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password" required&gt;&lt;br&gt;
              &lt;button id="login" class="btn btn-lg btn-primary btn-block" type="submit"&gt;&lt;i class="fa fa-sign-in"&gt;&lt;/i&gt;
                  Sign in&lt;/button&gt;
              &lt;a href="#" id="signUp" class="btn btn-lg btn-warning btn-block" data-toggle="modal" data-target="#signUpModal"&gt;&lt;i class="fa fa-user-plus"&gt;&lt;/i&gt; Sign Up&lt;/a&gt;
          &lt;/form&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
      &lt;div id="signUpModal" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;!-- Modal content--&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Register For An Account&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="container-fluid"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;form class="form-horizontal" id="profileForm" action="register.php" method="post"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;First name:&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="first_name" placeholder="Jane" type="text"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Last name:&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="last_name" placeholder="Doe" type="text"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Username:&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="username" placeholder="jane." type="text"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Role&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="group_role" placeholder="Role" type="text"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label" data-toggle="tooltip" title="If 'Salesman', enter sales region otherwise leave blank."&gt;Region:&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="region" placeholder="region" type="text"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Department&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="department" placeholder="Department" type="text"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Email:&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="email_address" placeholder="janesemail@gmail.com" type="text"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Phone&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input type="text" name="phone" placeholder="555-123-4567" class="input-medium bfh-phone form-control" data-format="+1 (ddd) ddd-dddd"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Password:&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="password" type="password"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;Confirm password:&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;input class="form-control" name="confirm_password" type="password"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label class="col-md-3 control-label"&gt;&lt;/label&gt;
                                      &lt;div class="col-md-8"&gt;
                                          &lt;button class="btn btn-primary" value="Send Request" type="submit"&gt;&lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt; Send Request&lt;/button&gt;
                                          &lt;span&gt;&lt;/span&gt;
                                          &lt;input class="btn btn-default" value="Cancel" id="cancel" type="reset"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="lib/js/jquery-2.1.4.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="lib/js/winmarkltd-BootstrapFormHelpers-d4201db/dist/js/bootstrap-formhelpers.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Styles:</p>
  
  <pre><code>.navbar-default{
      height: 100px;
  }
  
  body {
      background: #eee !important;    
  }
  
  .wrapper {  
      margin-top: 80px;
      margin-bottom: 80px;
  }
  
  .form-signin {
      max-width: 380px;
      padding: 15px 35px 45px;
      margin: 0 auto;
      background-color: #fff;
      border: 1px solid rgba(0,0,0,0.1);  
  
      .form-signin-heading,
      .checkbox {
          margin-bottom: 30px;
      }
  
      .checkbox {
          font-weight: normal;
      }
  
      .form-control {
          position: relative;
          font-size: 16px;
          height: auto;
          padding: 10px;
          /*@include box-sizing(border-box);*/
  
          &amp;:focus {
              z-index: 2;
          }
      }
  
      input[type="text"] {
          margin-bottom: -1px;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
      }
  
      input[type="password"] {
          margin-bottom: 20px;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
      }
  }
  </code></pre>
  
  <p>What am I doing wrong??</p>