<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="login-box"> <form id="loginForm" action="#" method="POST"> <div class="panel panel-default"> <div class="panel-heading"><b>Sign in</b> <span class="glyphicon glyphicon-pencil pull-right" aria-hidden="true"></span></div> <div class="panel-body"> <div class="form-group has-primary has-feedback"> <label class="control-label" for="login">Login <span class="regForm text-danger">*</span></label> <input type="text" class="form-control" name="login" id="login" aria-describedby="login" required> <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span> </div> <div class="form-group has-primary has-feedback"> <label class="control-label" for="password">Password <span class="regForm text-danger">*</span></label> <input type="password" class="form-control" name="password" id="password" aria-describedby="password" required> <span class="glyphicon glyphicon-lock form-control-feedback" aria-hidden="true"></span> </div> </div> <div class="panel-footer"> <input type="submit" class="btn btn-success" id="goToChat" value="Sign in" /> <a href="<?php echo URL;?>/registration" class="btn btn-warning pull-right">Registration</a> </div> </div> </form> </div> <div class="text-center"> <a href="#">Require password?</a> </div>

.login-box{ margin:6% auto 0; width:300px; display: block; background-color: #fff; -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.2); -o-box-shadow: 0 2px 1px rgba(0,0,0,0.2); -ms-box-shadow: 0 2px 1px rgba(0,0,0,0.2); box-shadow: 0 2px 1px rgba(0,0,0,0.2); } .login-box .panel-heading span{ color:#aaa; font-size:14px }