<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 ----------> <section class="login-info"> <div class="container"> <div class="row main"> <div class="form-header"> <h1 class="text-center ">login form </h1> </div> <div class="main-content"> <div class="input-group "> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span> <input id="email" type="text" class="form-control" name="email" placeholder="Enter your Email"> </div> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span> <input id="password" type="password" class="form-control" name="password" placeholder="Enter your Password"> </div> <div class="checkbox"> <label class="remember"> <input name="remember" type="checkbox" > Remember Me </label> </div> <div class="form-group "> <a href="#" type="button" class="btn btn-danger btn-lg btn-block login-button">login</a> </div> </div> </div> </div> </section>

.main{ margin-top: 50px; } .main-content { /* background-color:#009edf;*/ border: 2px solid #009edf; margin: 0 auto; max-width: 500px; padding: 20px 40px; color: #ccc; text-shadow: none; } .input-group{ margin: 20px 0px; } .input-group-addon { color: #009edf ; font-size: 17px; } .login-button{ margin: 0px auto; max-width: 200px;; } .form-header{ max-width: 500px; margin: 0 auto; background-color: #009edf; color: #fff; width: 100% ; padding: 20px 0px; border-top-right-radius:10px ; border-top-left-radius:10px } .remember{ color: black; }