HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form class="form-wrap">
     
      <h1 class="h3 mb-3 font-weight-normal">Login</h1>
       
      <div class="form-group">
      <input type="email" id="inputEmail" class="form-control" placeholder=" " required autofocus>
      <label for="inputEmail">Email address</label>
      </div>
      <div class="form-group">
      <input type="password" placeholder=" " id="inputPassword" class="form-control" required>
      <label for="inputPassword">Password</label>
      </div>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-3 mb-3 text-muted text-center">&copy; Bootstrap Example 2018-2019</p>
    </form>

CSS

1
2
3
4
5
6
7
8
.form-wrap{max-width:25rem; margin:50px auto;}
.form-wrap .form-control{border:0; border-bottom:1px solid #ccc; padding:0px; margin-top:40px; font-size:1.2rem; box-shadow:0 0 0;}
.form-wrap .form-group{position:relative;}
.form-wrap .form-group label:hover{cursor:text;}
.form-wrap .form-group label{position:absolute; bottom:0; -webkit-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}
.form-wrap .form-group .form-control:focus + label, .form-wrap .form-group .form-control:valid + label, .form-wrap .form-group .form-control:invalid + label, .form-wrap .form-group .form-control:placeholder-shown:focus + label{transform: translateY(-20px);    font-size: 11px;}

.form-wrap .form-group .form-control:placeholder-shown + label{transform: translateY(0); font-size:1.2rem; color:#777;}

Preview

bootstrap 4 login example

Leave a Reply

avatar
  Subscribe  
Notify of