<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <form class="form-signin"> <input type="text" class="form-control" name="username" placeholder="Email Address" required="" autofocus="" /> <input type="password" class="form-control" name="password" placeholder="Password" required=""/> <button class="btn btn-lg btn-defualt btn-block" type="submit">Log in</button> </form> </div>

body { background: #ccc; } .form-signin { max-width: 280px; margin: 60px auto 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; } .form-signin input[type="text"] { margin-bottom: -1px; border-top: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; box-shadow: none; border-radius: 3px 3px 0px 0px; } .form-signin input[type="text"]:focus { /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/ } .form-signin input[type="password"] { z-index: 2; margin-bottom: 20px; border-top: none; border-bottom: 1px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; border-radius: 0px 0px 3px 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .form-signin input[type="password"]:focus { /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0px 1px 0px 0px rgba(255, 255, 255, 0.5);*/ } /*.form-signin .btn { font-weight: bold; border-radius: 3px; border: none; }*/