Bootstrap Snippet login 2 using HTML CSS Bootstrap

"login 2"
Bootstrap 4.1.1 Snippet by stenlysefant

4.1.1

345 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <body> <div class="container login-container"> <div class="row"> <div class="col-md-6 ads"> <h1><span id="fl">Tahukah </span><span id="sl">anda</span></h1> </div> <div class="col-md-6 login-form"> <div class="profile-img">  </div><br> <h3>Login Tahukah anda</h3> <form> <div class="form-group"> <input type="text" class="form-control" name="username" placeholder="Username"> </div> <div class="form-group"> <input type="text" class="form-control" name="password" placeholder="Password"> </div> <div class="form-group"> <button type="button" class="btn btn-primary btn-lg btn-block">Sign In</button> </div> <div class="form-group forget-password"> <a href="#">Forget Password</a> </div> </form> </div> </div> </div>

body { font-family: 'Montserrat', sans-serif; transition: 3s; } .login-container { margin-top: 10%; border: 1px solid #CCD1D1; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-width: 50%; } .ads { background-color: #A569BD; border-top-left-radius: 5px; border-bottom-left-radius: 5px; color: #fff; padding: 15px; text-align: center; } .ads h1 { margin-top: 20%; } #fl { font-weight: 600; } #sl { font-weight: 100 !important; } .profile-img { text-align: center; } .profile-img img { border-radius: 50%; /* animation: mymove 2s infinite; */ } @keyframes mymove { from {border: 1px solid #F2F3F4;} to {border: 8px solid #F2F3F4;} } .login-form { padding: 15px; } .login-form h3 { text-align: center; padding-top: 15px; padding-bottom: 15px; } .form-control { font-size: 14px; } .forget-password a { font-weight: 500; text-decoration: none; font-size: 14px; }

Related: See More

Vue Material Dashboard

Vue Material Dashboard

login-form

Login Form

Bootstrap 4 login from

Bootstrap 4 login from

Questions / Comments:

Posting GuidelinesFormatting