<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="span4 offset4 well"> <legend>Please Sign In</legend> <div class="alert alert-error"> <a class="close" data-dismiss="alert" href="#">×</a>Incorrect Username or Password! </div> <form method="POST" action="" accept-charset="UTF-8"> <input type="text" id="username" class="span4" name="username" placeholder="Username"> <input type="password" id="password" class="span4" name="password" placeholder="Password"> <label class="checkbox"> <input type="checkbox" name="remember" value="1"> Remember Me </label> <button type="submit" name="submit" class="btn btn-info btn-block">Sign in</button> </form> </div> </div> </div>

body { padding-top: 120px; padding-bottom: 40px; background-color: #eee; } .btn { outline:0; border:none; border-top:none; border-bottom:none; border-left:none; border-right:none; box-shadow:inset 2px -3px rgba(0,0,0,0.15); } .btn:focus { outline:0; -webkit-outline:0; -moz-outline:0; } .fullscreen_bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: 50% 50%; background-image: url('http://cleancanvas.herokuapp.com/img/backgrounds/color-splash.jpg'); background-repeat:repeat; } .form-signin { max-width: 280px; padding: 15px; margin: 0 auto; margin-top:50px; } .form-signin .form-signin-heading, .form-signin { margin-bottom: 10px; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-color: #000; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: rgb(0,0,0); border-top:1px solid rgba(0,0,0,0.08); } .form-signin-heading { color: #fff; text-align: center; text-shadow: 0 2px 2px rgba(0,0,0,0.5); }