<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"> <h3> Medical Login Form</h2> </div> <div class="form-group"> <div class="row"> <h2><img class="img-circle img" src="http://icons.iconarchive.com/icons/iconshock/super-vista-medical/256/stethoscope-icon.png"/>Login our system</h2> </div> <div class="row"> <div class="form-group"> <label for="inputEmail" class="col-sm-2 control-label">Email:</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-primary glyphicon glyphicon-envelope" type="button"></button> </span> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> </div> <div class="row"> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password:</label> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-primary glyphicon glyphicon-eye-close" type="button"></button> </span> <input type="Password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </div> <div class="row"> <div class="checkbox checkbox-primary"> <label id="remember"><input type="checkbox" value="">Remember me</label> </div> </div> <div class="row"> <div class="col-sm-6"></div> <a href="#" class="col-sm-1 btn btn-primary btn-lg active" role="button">sign in</a> </div> </div> </div>

body { font-family:JF Flat; color:#5687C4; } .img { width:80px; height:75px; } .input-group input[type="email"] { font-weight:bolder; color:#5687C4; background-color:#DBE3ED; width:420px; } .input-group input[type="password"] { font-weight:bolder; color:#5687C4; background-color:#DBE3ED; width:300px; } div >label { font-size:14pt; color:#5687C4; } label#remember { font-size:12pt; padding-left:35px; }