<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"> <div class="row"> <div class="col-md-4"> <h2 class="text-center text-primary" style="font-family:'Segoe UI'">Sign In</h2> <div style="background-color:#eee;padding:5px 10px;border-top:2px solid green"> <div class="form-group"> <label style="color:gray;font-family:'Segoe UI'">UserName</label> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="login-username" type="text" class="form-control" style="border-radius:0px" name="username" value="" placeholder="username or email"> </div> </div> <div class="form-group"> <label style="color:gray;font-family:'Segoe UI'">Password</label> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input id="login-password" type="password" class="form-control" style="border-radius:0px" name="password" placeholder="password"> </div> </div> <div class="form-group"> <input type="reset" value="Clear" class="btn btn-info " style="border-radius:0px" /> <input type="submit" value="Submit" class="btn btn-primary " style="border-radius:0px" /> </div> <p>Don't have an account! <a href="http://bootsnipp.com/snippets/rv2mR">Sign Up Here</a></p> <p class=""><a href="http://bootsnipp.com/snippets/rv2mR">Forgot UserName or Password</a></p> </div> </div> <div class="col-md-4"> </div> <div class="col-md-4"> </div> </div> </div>