<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="custom-login-panel"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt=""> <div class="form-login"> <h4>User Login Panel</h4> <div class="form-group"> <input type="text" class="form-control" placeholder="Username"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Password" > </div> <div class="wrapper"> <span class="group-btn"> <input type="submit" class="submit btn btn-primary"> </span> </div> </div> </div> </div> </div> </div>

.form-login { background-color: #ffffff; padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; border-radius: 10px; border-color: #676767; border-width: 5px; /* box-shadow: 0 1px 0 #777272; */ margin-top: 17px; margin-bottom: 20px; border: solid 2px #428bca; text-align:center; } .form-login .form-control{max-width:100%; height:36px;} .form-login h4{border-bottom: solid 1px #cccccc; padding-bottom: 10px; margin-bottom: 20px} .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin-top:20px; }