<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container login-page"> <h1 class="login-header">login </h1> <form> <div class="form-group row"> <label for="inputPassword" class="col-sm-2 col-form-label">E-Mail Address</label> <div class="col-sm-10"> <input type="password" class="form-control" id="formGroupExampleInput" placeholder="example@mail.com"> </div> </div> <div class="form-group row"> <label for="inputPassword" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlInline"> <label class="custom-control-label" for="customControlInline">Remember me</label> </div> <a href="#" class="login-btn" title="">Login</a> <a href="#" class="forget-password" title="">Forget Password?</a> </form> </div>

.login-page{ border:2px solid #c1c1c1; } .login-header{ border-color: #d3e0e9; } .login-btn a{ padding:10px 20px; background-color: #007bff; color:#fff; text-transform: uppercase; text-decoration: none; }