<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- youtube: https://www.youtube.com/channel/UCqlv40k1N0L9nsSrzL1OWwg/videos site: http://www.templateindirr.com --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> <div class="login"> <div class="container"> <div class="inner-login"> <div class="col-lg-6 col-lg-offset-3"> <div class="login-box"> <form action=""> <h1>Login</h1> <div class="form-group"> <div class="col-lg-1"> <i class="fa fa-user" aria-hidden="true"></i> </div> <div class="col-lg-11"> <input id="username" placeholder="Username" type="text" class="form-control" /> </div> </div> <div class="form-group"> <div class="col-lg-1"> <i class="fa fa-key" aria-hidden="true"></i> </div> <div class="col-lg-11"> <input id="password" placeholder="Password" type="text" class="form-control" /> </div> </div> <div class="form-group"> <div class="buttons"> <button class="btn btn-danger btn-cancel">Cancel</button> <input type="submit" class="btn btn-success btn-login" value="Login" /> </div> </div> </form> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900'); h1{ font-size:30px; margin-bottom:30px; padding-left:50px; font-family: 'Lato', sans-serif; } .fa{ padding:30px 0px; } .login{ font-family: 'Lato', sans-serif; background: #c1c1c0; padding:160px 0px; } .login-box{ background:#FFF; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); padding:30px; border-radius:8px; min-height:350px; } .form-control{ margin:20px 0px; } .buttons{ float:right; margin:20px 0px; }