13+ Most Beautiful Login Form Templates Designed with Bootstrap 5

Templates


author small image Siva Kishore G
Posted : 11 March 2022
Modified : 17 Aug 2022
Beginner Developers

Login Page Bootstrap 5 Templates

These are some of my best collection of most beautiful login screen html templates. Assuming you already imported bootstrap 5 and font awesome icons library

These are only HTML & CSS codes. Check out the form submission code here

1. Page Centered

This login form is centered on page using CSS. Consider bootstrap's sticky navbar when implemneting this. Otherwise, adjust the margin value of .formContainer as per your requirement.

login form centered in page
View code
<div class="p-4">
<div class="container">
  <div class="row">
    <div class="col-md-5 col-sm-6 col-lg-3 mx-auto">
      <div class="formContainer">
        <h2 class="p-2 text-center mb-4 h4" id="formHeading">Login</h2>
        <form action="#">
          <div class="form-group mt-3">
            <label class="mb-2" for="username">Username / Email ID </label>
            <input class="form-control" id="username" name="username" type="email" />
          </div>
          <div class="form-group mt-3">
            <label class="mb-2" for="password">Password</label>
            <input class="form-control" id="password" name="password" placeholder="username" />
          </div>
          <div class="mt-3">
            <input type="checkbox" /> Remember me
          </div>
          <button class="btn btn-success btn-lg w-100 mt-4">Login</button>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
.formContainer {
box-shadow : 4px 8px 16px #d7d7d7;
margin:20vh auto;
padding:20px;
border-radius:0px 0px 4px 4px;
}
input {
box-shadow:none !important;
outline:none;
}
#formHeading {
background:#63cd9c;
margin:-20px;
border-radius:4px 4px 0px 0px
}

2. Login with social media

There are times where you want your users to signup quickly with using their already established social media accounts. This UI will put more emphasis on that.

login form with social media
View code
    <div class="p-4">
<div class="container">
  <div class="row">
    <div class="col-md-5 col-sm-6 col-lg-3 mx-auto">
      <div class="formContainer">
        <h2 class="p-2 text-center text-white h4" id="formHeading">Login</h2>
        <div class="py-2 mb-4 text-center" id="loginWithPanel">
          <span class="loginWithIcon"><i class="fab fa-google"></i></span>
          <span class="loginWithIcon"><i class="fab fa-facebook-f"></i></span>
          <span class="loginWithIcon"><i class="fab fa-linkedin-in"></i></span>
        </div>
        <form action="#">
          <div class="form-group mt-3">
            <label class="mb-2" for="username">Username / Email ID </label>
            <input class="form-control" id="username" name="username" type="email" />
          </div>
          <div class="form-group mt-3">
            <label class="mb-2" for="password">Password</label>
            <input class="form-control" id="password" name="password" placeholder="username" />
          </div>
          <div class="mt-3">
            <input type="checkbox" /> Remember me
          </div>
          <button class="btn btn-outline-primary btn-lg w-100 mt-4">Login</button>
        </form>
      </div>
    </div>
  </div>
</div>
</div>
    .formContainer {
  box-shadow : 4px 8px 16px #d7d7d7;
  margin:15vh auto;
  padding:20px;
  border-radius:0px 0px 4px 4px;
}
input {
  box-shadow:none !important;
  outline:none;
}
#formHeading {
  background:#6391cd;
  margin:-20px -20px 0px -20px;
  border-radius:4px 4px 0px 0px
}
.loginWithIcon {
  font-size:14px;
  height:32px;
  width:32px;
  background:#6391cd;
  margin:8px;
  line-height:32px;
  display:inline-block;
  border-radius:32px;
  text-align:center;
  color:#fff
}
#loginWithPanel {
  background:#d8e8fd;
  margin:auto -20px;
}

3. Two Columns

This is best suited to promote your products while user tries to login. This page show a full height graphics on the left column on screens upto 767px and shows only the login screen for mobile and tablet devices. Adjust the breakpoints to your wish with @media queries as shown in the css code below

login form with social media
View code
<div id="mainContainer">
  <div class="">
  <div class="row align-items-center">
    <div class="col-lg-6 col-md-6 col-xs-12 d-none d-lg-block d-md-block">
      <div id="mainBgn"></div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12">
      <div class="p-4 centerOnMobile" >
        <div class="formContainer">
          <h2 class="p-2 h4 text-center"><i class="fas fa-lock me-2"></i> Login</h2>
          <form action="#">
            <div class="form-floating my-3">
              <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
              <label for="floatingInput">Email address</label>
            </div>
            <div class="form-floating">
              <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
              <label for="floatingPassword">Password</label>
            </div>
            <div class="mt-3">
              <input type="checkbox" /> Remember me
            </div>
            <div id="btnHolder">
              <button class="btn btn-lg btn-primary mt-3 w-100">Login</button>
            </div>
          </form>
        </div>
        <div class="mt-2 text-center">
          <a href="#">New? signup</a><br />
          <a href="#">Forgot Password?</a>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
.formContainer {
    max-width:320px;
    box-shadow : 4px 8px 16px #d7d7d7;
    margin:0 auto;
    padding:20px;
    border-radius:0px 0px 4px 4px;
  }
  input {
    box-shadow:none !important;
    outline:none;
  }
  #btnHolder {
    margin:0px -20px -20px -20px;
  }
  #btnHolder .btn {
    border-radius:0px 0px 4px 4px !important;
    height:60px;
  }
  @media screen and (max-width:766px){
    .centerOnMobile {
      margin : 20vh auto
    }
  }
  @media screen and (min-width:767px){
    #mainBgn {
      background : url('replace this with your image path') no-repeat;
      background-size:cover;
      background-position:center;
      height:90vh;
      width:100%;
    }
    #mainContainer {
      box-shadow : 2px 4px 12px rgba(0,0,0,0.4);
      height:90vh;
      margin: 5vh 20px;
    }
  }

4. Login Popup

This screen will show a vertically centered login which pops up upon clicking a button. For more info see, bootstrap's modal on how to trigger it in multiple ways. The user can click outside to dismiss the popup.

login form inside a popup
View code
<div class="modal" id="popupLogin" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
  <div class="modal-content">
    <div class="modal-body">
      <div class="" >
        <div class="">
          <div id="brandLogoOuter">
            <div id="brandLogoInner">
              <i class="fas fa-lock"></i>
            </div>
          </div>
          <form action="#">
            <div class="input-group my-3">
              <span class="input-group-text"><i class="fas fa-at"></i></span>
              <input class="form-control" placeholder="Email ID" name="username" id="username" type="email" />
            </div>
            <div class="input-group my-3">
              <span class="input-group-text"><i class="fas fa-key"></i></span>
              <input class="form-control" placeholder="Password" name="password" id="password" type="password" />
            </div>
            <div class="mt-3 text-center">
              <input type="checkbox" class="me-2" /> Remember me
            </div>
            <div id="btnHolder">
              <button class="btn btn-lg btn-warning text-white mt-3 w-100">Login</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
input {
  box-shadow:none !important;
  outline:none;
}
input.form-control {
  height:48px;
}
#btnHolder {
  margin:0px -16px -16px -16px;
}
#btnHolder .btn {
  border-radius:0px 0px 4px 4px !important;
  height:60px;
}

#brandLogoOuter {
  margin-top:-40px;
}
#brandLogoInner {
  font-size:24px;
  width:48px;
  height:48px;
  line-height:48px;
  border-radius:50%;
  background : #ffc108;
  text-align:center;
  color:#fff;
  margin: 0 auto;
}

5. Modern

A page centered modern login form with two columns. Left featuring the company graphics and right with the actual form. Fully mobile resposive that shows only the form at smaller displays.I've also added the login to mask and unmask the password field when the eye icon is clicked.

Mordern login form
View code
<div class="min-vh-100 d-flex align-items-center">
  <div class="container">
    <div class="row">
      <div class="col-sm-7 mx-auto">
        <div class="shadow-lg">
          <div class="d-flex align-items-center">
            <div class="d-none d-md-block d-lg-block">
              <img src="/static_files/images/html/thApp.jpg" class="objectFit"  />
            </div>
            <div class="p-4" id="formPanel">
              <div class="text-center mb-5">
                <h1 class="customHeading h3 text-uppercase">Login</h1>
              </div>
              <form onsubmit="event.preventDefault();submitForm()">
                <div class="custom-form-group">
                  <label class="text-uppercase" for="username">Username</label>
                  <input type="text" id="username" class="pb-1" /><span class="pb-1"><i class="fas fa-user"></i></span>
                </div>
                <div class="custom-form-group mt-3">
                  <label class="text-uppercase" for="password">Password</label>
                  <input type="password" id="password" class="pb-1" /><span class="pb-1"><i id="showCursor" class="fas fa-eye-slash" onclick="showPassword(event)"></i></span>
                </div>
                <div class="mt-5">
                  <button class="w-100 p-2 d-block custom-btn" >Login</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.customHeading {
  color:#30c6b0;
}
.custom-form-group label {
  color:#30c6b0;
  font-size:13px;
  font-weight:bold;
  letter-spacing:2px;
}
.custom-form-group span {
  width:32px;
  border-bottom:1px solid #30c6b0;
  vertical-align:middle;
  color:#30c6b0;
  display:inline;
}
.custom-form-group input {
  width : calc(100% - 32px);
  border:none;
  border-bottom:1px solid #30c6b0;
  box-sizing:content-box;
  outline:none;
}
.custom-btn {
  border-radius:32px;
  background : #30c6b0;
  border:2px solid transparent;
  color:#fff;
  height:48px;
}
.custom-btn:hover {
  background : #fff;
  border:none;
  border:2px solid #30c6b0;
  color:#30c6b0;
}
#formPanel {
  min-width:280px;
  max-width:320px;
  width:100%;
  margin:0 auto;
}
.objectFit {
  object-fit:cover;
  width:100%;
  max-width:320px;
  min-height:60vh;
  margin:0 auto
}
#showCursor {
  cursor:pointer
}
  function showPassword(e){
  var input = document.getElementById('password')
  if(input.type === 'password'){
    input.type = "text"
    e.target.className = "fas fa-eye"
  }else{
    input.type = "password"
    e.target.className = "fas fa-eye-slash"
  }
}

6. Social Drawer

A page centered single column form with a collapsible section for social login links. Fully mobile resposive. The chevron rotates according to the status of the drawer.

Login form with drawer containng socila login links
View code
<div class="min-vh-100 d-flex align-items-center">
  <div class="container">
    <div class="row">
      <div class="col-sm-7 mx-auto">
        <div class="shadow-lg">
          <div class="d-flex align-items-center">
            <div class="d-none d-md-block d-lg-block">
              <img src="/static_files/images/html/thApp.jpg" class="objectFit"  />
            </div>
            <div class="p-4" id="formPanel">
              <div class="text-center mb-5">
                <h1 class="customHeading h3 text-uppercase">Login</h1>
              </div>
              <form onsubmit="event.preventDefault();submitForm()">
                <div class="custom-form-group">
                  <label class="text-uppercase" for="username">Username</label>
                  <input type="text" id="username" class="pb-1" /><span class="pb-1"><i class="fas fa-user"></i></span>
                </div>
                <div class="custom-form-group mt-3">
                  <label class="text-uppercase" for="password">Password</label>
                  <input type="password" id="password" class="pb-1" /><span class="pb-1"><i id="showCursor" class="fas fa-eye-slash" onclick="showPassword(event)"></i></span>
                </div>
                <div class="mt-5">
                  <button class="w-100 p-2 d-block custom-btn" >Login</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.customHeading {
  color:#30c6b0;
}
.custom-form-group label {
  color:#30c6b0;
  font-size:13px;
  font-weight:bold;
  letter-spacing:2px;
}
.custom-form-group span {
  width:32px;
  border-bottom:1px solid #30c6b0;
  vertical-align:middle;
  color:#30c6b0;
  display:inline;
}
.custom-form-group input {
  width : calc(100% - 32px);
  border:none;
  border-bottom:1px solid #30c6b0;
  box-sizing:content-box;
  outline:none;
}
.custom-btn {
  border-radius:32px;
  background : #30c6b0;
  border:2px solid transparent;
  color:#fff;
  height:48px;
}
.custom-btn:hover {
  background : #fff;
  border:none;
  border:2px solid #30c6b0;
  color:#30c6b0;
}
#formPanel {
  min-width:280px;
  max-width:320px;
  width:100%;
  margin:0 auto;
}
.objectFit {
  object-fit:cover;
  width:100%;
  max-width:320px;
  min-height:60vh;
  margin:0 auto
}
#showCursor {
  cursor:pointer
}
  function showPassword(e){
  var input = document.getElementById('password')
  if(input.type === 'password'){
    input.type = "text"
    e.target.className = "fas fa-eye"
  }else{
    input.type = "password"
    e.target.className = "fas fa-eye-slash"
  }
}

7. Multistep Login

Multistep login with mfa

What is a multistep form?

A multistep form is a form presented to the user in steps. Appropriate for long fillables, preform checks at regular intervals and verify the authenticity ith recaptcha etc. Now-a-days web security is a growing concern and as a result, development standards are changing.

In this template, I've designed a multistep form with three steps. In first step, you can verify if the user ID exists, in second step, verify the password and in third step, ask the user to verify the 6 digit code sent to their email or mobile phone.

See Demo

Process

This template contains all the front-end design code you need. In the javascript, I've simulated the server response wait using setTimeout function. Replace it with ajax or fetch as per your requirement. If you would like get the code for it as well, see the form submission.

View code
.slider {
    vertical-align:top;
    display:inline-block;
    width:100%;
    transition: all 200ms linear;
  }
  #slideOuter {
    padding-right:3px;
    width:320px;margin:20px auto;
    white-space:nowrap;
    overflow:hidden;
  }
  .toggleStep_1 .slider {
    transform : translateX(-320px)
  }
  .toggleStep_2 .slider {
    transform : translateX(-640px)
  }
  #currentUser {
    text-overflow : ellipsis;
    overflow: hidden;
  }
  .mfa {
    width:40px;
    height:40px;
  }
<div id="slideOuter">
    <div>
      <div class="pb-2 text-center"><h1 class="h4">Login</h1></div>
      <div id="customMessage" class='text-center text-danger'>

      </div>
      <div class="slider py-2">
        <form onsubmit="event.preventDefault();verifyUser()">
          <div class="form-floating mb-2">
            <input type="email" class="form-control" id="userid" placeholder="name@example.com" required>
            <label for="userid">Email address</label>
          </div>
          <div class="text-center">
            <button id="nextButton" class="btn btn-primary w-100 btn-lg">
              <span class="align-middle">Next</span>
            </button>
            <div class="visually-hidden" id="loadingSpinner1"><span class="spinner-border align-middle" role="status" style="font-size:6px"></span></div>
          </div>
        </form>
      </div>
      <div class="slider">
        <div class="text-secondary px-2 py-2 text-center" id="currentUser"></div>
        <form onsubmit="event.preventDefault();login(this)">
          <div class="form-floating mb-2">
            <input type="hidden" name="userid" id="currentUserid" />
            <input type="password" name="password" class="form-control" id="password" autocomplete="current-password" placeholder="password">
            <label for="password">Password</label>
          </div>
          <div class="text-center">
            <button id="submitButton" class="btn btn-success w-100 btn-lg">
              <span class="align-middle">Submit</span>
            </button>
            <div class="visually-hidden" id="loadingSpinner2">
              <span class="spinner-border align-middle" role="status" style="font-size:6px"></span>
            </div>
          </div>
        </form>
      </div>
      <div class="slider">
        <div class="text-secondary px-2 py-2 text-center">Enter the 6 digit code sent to your email</div>
        <form onsubmit="event.preventDefault();multiFactor(this)">
          <div class="mb-4 mt-2 text-center">
            <input type="text" class="text-center mfa" onkeyup="nextFocus(this,'mfa2')" name="mfa1" id="mfa1" required >
            <input type="text" class="text-center mfa" onkeyup="nextFocus(this,'mfa3')" name="mfa2" id="mfa2" required>
            <input type="text" class="text-center mfa" onkeyup="nextFocus(this,'mfa4')" name="mfa3" id="mfa3" required>
            <input type="text" class="text-center mfa" onkeyup="nextFocus(this,'mfa5')" name="mfa4" id="mfa4" required>
            <input type="text" class="text-center mfa" onkeyup="nextFocus(this,'mfa6')" name="mfa5" id="mfa5" required>
            <input type="text" class="text-center mfa" name="mfa6" id="mfa6" required>
          </div>
          <div class="text-center">
            <button id="verifyBtn" class="btn btn-info w-100 btn-lg">
              <span class="align-middle">Verify</span>
            </button>
            <div class="visually-hidden" id="loadingSpinner3">
              <span class="spinner-border align-middle" role="status" style="font-size:6px"></span>
            </div>
          </div>
        </form>
      </div>

    </div>
  </div>
var nextBtn = document.getElementById('nextButton')
  var loadingSpinner1 = document.getElementById('loadingSpinner1')
  var loadingSpinner2 = document.getElementById('loadingSpinner2')
  var loadingSpinner3 = document.getElementById('loadingSpinner3')
  var slideOuter = document.getElementById('slideOuter')
  var submitButton = document.getElementById('submitButton')
  var verifyBtn = document.getElementById('verifyBtn')


  var userid = document.getElementById('userid')
  var password = document.getElementById('password')

  function verifyUser(){
    var uid = userid.value
    document.getElementById('currentUser').innerText = uid
    document.getElementById('currentUserid').value = uid

    nextBtn.style.display = "none"
    loadingSpinner1.className = 'my-4'
    setTimeout( function(){
      slideOuter.className = 'toggleStep_1'
    }, 1000 )
  }

  function showMessage(msg){
    var cmsg = document.getElementById('customMessage')
    cmsg.innerText = msg
    setTimeout( function(){ cmsg.innerText = ""  } , 3000 )
  }

  /* Use this function to go back from step 2 to step 1
  function goback(){
    nextBtn.style.display = "inline-block"
    loadingSpinner1.className = 'visually-hidden'
    slideOuter.className = ''
  }
  */

  function login(e){
    submitButton.style.display = "none"
    loadingSpinner2.className = 'my-4'
    setTimeout( function(){
      slideOuter.className = 'toggleStep_2'
    }, 1000 )
  }

  function multiFactor(e){
    verifyBtn.style.display = "none"
    loadingSpinner3.className = 'my-4'
  }

  function nextFocus(e,tgt){
    if(!isNaN(e.value)) document.getElementById(tgt).focus()
    else e.value = ""
  }

8. Tabbed Login

Pink themed login page with login and signup tabs. This page consists of two columns, one we use an abstract image and the other for the login form. The left column disappears at mobile screen breakpoint and a separate switch type tab appear to switch between login and signup.

Image showing login page template on laptop and a mobile phone
View code
<div class="d-flex vh-100 justify-content-center align-items-center">
  <div class="p-2 flex-grow">
    <div class="smallContainer border shadow rounded">
      <div class="row g-0">
        <div class="col-sm-6 col-xs-12 d-none d-sm-block position-relative" id='leftCol'>
          <img src="/static_files/images/html/pinkAbs.jpg" />
          <div id="pt-5 text-end w-100" class="position-absolute end-0 top-0">
            <a href="#" class="customBtn activeBtn">Login</a><br />
            <a href="#" class="customBtn">signup</a>
          </div>

        </div>
        <div class="col-sm-6 col-xs-12">
          <div class="d-flex flex-column" style="height:100%">

            <div class="text-center d-sm-none d-xs-block">
              <div class="switch-button">
                <input class="switch-button-checkbox" type="checkbox"></input>
                <label class="switch-button-label" for=""><span class="switch-button-label-span">Login</span></label>
              </div>
            </div>

            <div class="my-auto p-5">
              <div class="text-center">
                <div>
                  <img src="/static_files/images/logos/logo_2.png" height="72" />
                </div>
                <h2 class="h3 pb-3">LOGIN</h2>
              </div>
              <form>
                <div class="position-relative my-3 inputGroup text-center">
                  <span class="position-absolute"><i class="far fa-user"></i></span>
                  <input type="email" class="border-0 border-bottom w-100" placeholder="Enter ID" />
                </div>
                <div class="position-relative my-3 inputGroup text-center">
                  <span class="position-absolute"><i class="far fa-eye-slash"></i></span>
                  <input type="password" class="border-0 border-bottom w-100" placeholder="Password" />
                </div>
                <div class="d-flex align-items-center justify-content-between pt-2">
                  <a class="linkFlare" href="#"><small>Forgot Password?</small></a>
                  <button class="btn btn-accent px-4 rounded-pill">LOGIN</button>
                </div>
              </form>
            </div>
            <div>
              <div class="p-2 text-center" id="lsHeading">
                LOGIN WITH
              </div>
              <div class="bg-accent-2 p-3 d-flex justify-content-evenly">
                <i class="fab fa-facebook-square"></i>
                <i class="fab fa-google"></i>
                <i class="fab fa-twitter"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.smallContainer {
    max-width:840px;
    margin:0 auto;
  }
  .inputGroup i {
    line-height: 48px;
  }
  .inputGroup input{
    padding-left : 32px;
    height:48px;
    outline: none;
  }
  #leftCol img{
    width:100%;
    object-fit: cover;
  }
  .customBtn {
    color:#fff;
    padding:12px 32px;
    border-radius:32px 0px 0px 32px;
    display:inline-block;
    transform : translateY(120px);
    text-decoration: none;
    margin-right:-15px;
  }
  .linkFlare {
    color: rgb(241, 82, 115);
    text-decoration: none;
  }
  .btn-accent:hover{
    background: rgb(244, 142, 163);
    color:#fff;
  }

  .btn-accent {
    background: rgb(241, 82, 115);
    color:#fff;
  }
  ::placeholder {
    color : rgb(170, 170, 170)
  }

  .customBtn:hover,
  .activeBtn {
    color: rgb(241, 82, 115);
    background:#fff;
    box-shadow: -18px -1px  4px rgba(0,0,0,0.1);
  }
  #lsHeading {
    letter-spacing:4px;
    font-size:12px;
    background: #ffecf4;
    color : rgb(227, 43, 115)
  }
  .bg-accent-2 {
    background : #fdf4f8
  }

  /* Custom Switch */
  .switch-button {
    margin: 10px auto;
    border:1px solid #eaddda;
    border-radius: 30px;
    overflow: hidden;
    width: 240px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    background: #fbbdd5;
    position: relative;
    padding-right: 120px;
    position: relative;

  }
  .switch-button:before {
    content: "Signup";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    color:rgb(227, 43, 115);
  }
  .switch-button-checkbox {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
  }
  .switch-button-checkbox:checked + .switch-button-label:before {
    transform: translateX(120px);
    transition: transform 300ms linear;
  }
  .switch-button-checkbox + .switch-button-label {
    position: relative;
    padding: 8px 0;
    display: block;
    user-select: none;
    pointer-events: none;
    color:rgb(227, 43, 115);
  }
  .switch-button-checkbox + .switch-button-label:before {
    content: "";
    background: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 30px;
    transform: translateX(0);
    transition: transform 300ms;

  }
  .switch-button-checkbox + .switch-button-label .switch-button-label-span {
    position: relative;
  }

9. Full Page Background

This login page is designed with a full page background appropriate for non textual images. The login form is aligned right with different sizes for different screen breakpoints.

Full page background and login form aligned right
View code
<div id="pageContent">
  <div class="d-flex align-items-center h-100">
    <div class="container">
      <div class="row">
        <div class="col-xl-4 col-lg-5 col-md-6 col-sm-8 col-xs-12 ms-auto">
          <div class="bg-white rounded shadow-lg">
            <h1 class="text-center h5 pt-5 pb-3"><strong>LOGIN</strong></h1>
            <form class="py-2">
              <div class="position-relative maxWidth320 px-2">
                <div class="inlineLogo"><i class="text-accent fas fa-at"></i></div>
                <input type="email" placeholder="Email ID" class="border-0  w-100" />
              </div>
              <div class="position-relative maxWidth320 px-2 d-flex align-items-end justify-content-between">
                <div>
                  <div class="inlineLogo"><i class="text-accent fas fa-key"></i></div>
                  <input type="password" placeholder="Password" class="border-0  w-100" />
                </div>
                <div>
                  <button class="btn text-accent">Forgot?</button>
                </div>
              </div>
              <div id="submitBtn" class="text-center">
                <button class="btn w-50 btn-lg shadow-sm rounded-pill">Login</button>
              </div>
            </form>
            <div class="text-center pb-4">
              Don't have an account? <a href="#">Signup</a>
            </div>
          </div>
          <div class="p-2 mx-2 rounded-bottom shadow bg-accent border-bottom border-dark"></div>
          <div class="p-1 mx-3 rounded-bottom shadow bg-accent"></div>
        </div>
      </div>
    </div>
  </div>
</div>
#pageContent {
    background : url('/static_files/images/html/cliffHanger.jpg') no-repeat;
    background-size : cover;
    background-position: center;
    height:100vh;
    width:100%;
  }
  input {
    height:64px;
    outline : none;
    padding-left:32px;
  }
  .inlineLogo {
    position : absolute;
    line-height:64px;
  }
  .text-accent {
    color:#ea3f2d
  }
  .bg-accent {
    background-color:#ea3f2d
  }
  #submitBtn {
    margin-top:64px;
    margin-bottom: 32px;
    border-top : 1px dashed #eaeaea;
  }
  #submitBtn button {
    margin-top:-28px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7644a+0,e73827+100 */
    background: rgb(247,100,74); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(247,100,74,1) 0%, rgba(231,56,39,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(247,100,74,1) 0%,rgba(231,56,39,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(247,100,74,1) 0%,rgba(231,56,39,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7644a', endColorstr='#e73827',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color:#fff;
  }
  .maxWidth320 {
    max-width:320px;
    margin: 0 auto;
  }

10. Full Page Semi-Transparent

A page centered login form featuring a logo and a beautiful background. The background is chosen as such the mountains are aligned perfectly at the bottom of the form.

Full page background and semi transparent login form
View code
<div class="vh-100 w-100 d-flex align-items-center" id="mainBgn">
  <div class="formContainer">
    <div class="text-center mb-4 pb-3">
      <img src="/static_files/images/logos/rockMoon.png" alt="Company Logo" height="48">
    </div>
    <form>
      <div>
        <span class="inputLogo"><i class="fas fa-lock"></i></span><input type="text" class="form-control rounded-pill" name="emailid" placeholder="example@email.co">
      </div>
      <div class="my-2">
        <span class="inputLogo"><i class="fas fa-key"></i></span><input type="password" class="form-control rounded-pill" name="password" placeholder="password">
      </div>
      <button class="btn btn-accent rounded-pill w-100" type="submit">Login</button>
    </form>
  </div>
</div>
.formContainer {
    padding:24px;
    width:100%;
    max-width:320px;
    margin:0 auto
  }
  .formContainer input {
    height:48px;
    padding-left:48px;
    background: rgba(255,255,255,0.1);
    border:none;
    color:#fff;
  }
  .btn-accent:active {
    box-shadow: 0px 0px 2px #D62822;
  }
  .formContainer input:focus {
    box-shadow: 0px 0px 2px #D62822;
    background: rgba(255,255,255,0.7);
  }
  .inputLogo {
    position:absolute;
    margin-top:12px;
    margin-left:18px;
    color : #fff
  }

  #mainBgn {
    background : url('/static_files/images/html/dawn_2.jpg') no-repeat;
    background-size: cover;
    background-position: center bottom
  }
  .btn-accent {
    background: rgb(214,40,34); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(214,40,34,1) 0%, rgba(216,82,76,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(214,40,34,1) 0%,rgba(216,82,76,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(214,40,34,1) 0%,rgba(216,82,76,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d62822', endColorstr='#d8524c',GradientType=0 ); /* IE6-9 */
    height:48px;
    color:#fff;
    border:none;
  }
  .btn-accent:hover {
    background: rgb(216,82,76); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(216,82,76,1) 0%, rgba(214,40,34,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(216,82,76,1) 0%,rgba(214,40,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(216,82,76,1) 0%,rgba(214,40,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8524c', endColorstr='#d62822',GradientType=0 ); /* IE6-9 */
    color:#fff;
  }
  ::placeholder {
    color: #ececec !important
  }

11. Neumorphic Page Centered

A this login page features a two columns with left column for the image and right colum for the login form. The left column is removed at xs breakpoint showing only the login form. The shadows are designed in such a way that it looks like a tablet which is basically a neumorphic design.

Page centered login neumorphic tablet
View code
<div class="container vh-100 d-flex align-items-center">
  <div id="innerPage">
    <div class="row align-items-center justify-content-center">
      <div class="col-sm-6 col-xs-12 d-sm-block d-none">
        <div id="imgBgn">
        </div>
      </div>
      <div class="col-sm-6 col-xs-12 text-white p-5">
        <div class="lead">
          <h3>Welcome Back</h3>
          <p class="fs-6 mb-4">
            <small>Login to continue to your valuable services. Current pricing and futures.</small>
          </p>
        </div>
        <button type="button" class="btn btn-primary w-100 text-white"><i class="fab fa-google me-2"></i> Sign in with Google</button>
        <div class="mt-4">
          <p>
            Enter Email
          </p>
        </div>
        <input class="form-control rounded-0 mb-3" type="Email" name="" placeholder="Enter Email" />
        <input class="form-control rounded-0 mb-3" type="password" name="" placeholder="Enter Password" />
        <div>
          <input type="checkbox" value="" class="me-2" id="flexCheckDefault">
          <label for="flexCheckDefault">Remember me</label>
        </div>
        <button class="btn btn-info mt-4 w-100" type="submit">Submit</button>
      </div>
    </div>
  </div>
</div>
body {
    background:#162847
  }
  #innerPage {
    width:100%;
    max-width:840px;
    margin : 0 auto;
    border-radius: 12px;
    background: #01102a;
    box-shadow:  7px 7px 13px 1px #010b1e,
                 -10px -9px 11px 1px #1d335a;
  }
  .form-control {
    background: none;
    border:none;
    border-bottom : 1px solid #45bdd9;
    color:#fff;
  }
  #imgBgn {
    background : url('/static_files/images/html/sheildFlare.jpg') no-repeat;
    background-size: cover;
    background-position:center;
    min-height:75vh;
    width:100%;
    border-radius: 12px 0px 0px 12px;
  }

12. 3d Card

This is a multi step login system with 3d card flip style. The card flips when the user enters the ID and prompts to enter the password. A "go back" feature also exists. In the demo code, I've used setTimeout to create a delay for showing the loading button. This needs to be replaced with the server call (ajax or fetch).

3d card filp login template
View code
<div class="mt-5 pt-5">
  <div class="login-card rounded mx-auto ">
    <div class="login-card-inner" id="innerCard">
      <div class="login-card-front">
        <div class="p-4">
          <h2 class="h2">LOGO</h2>
          <p class="mb-3">
            Central Monitoring System
          </p>
          <form onsubmit="event.preventDefault()">
            <div>
              <input type="text" class="form-control" id="emailid" type="email" placeholder="Enter Email ID" autofocus>
            </div>
            <button class="w-100 mt-2 btn btn-info text-white" type="button" onclick="rotateCard(this)">
              Next
            </button>
          </form>
        </div>
      </div>
      <div class="login-card-back">
        <div class="p-4">
          <h2 class="h2">LOGO</h2>
          <p class="mb-3">
            Enter Password
          </p>
          <form onsubmit="event.preventDefault()">
            <div>
              <input type="password" class="form-control" id="password"  placeholder="Password" autofocus>
            </div>
            <button class="w-100 btn btn-success mt-2" onclick="login(this)">Login</button>
          </form>
          <div class="mt-2">
            <button class="btn" onclick="goBack()" id="goBackBtn">Go Back</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.login-card {
    background-color: transparent;
    width: 360px;
    height: 360px;
    border: 1px solid #f1f1f1;
    perspective: 800px;
  }

  .login-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  .rotateCard {
    transform: rotateY(180deg);
  }

  .login-card-front, .login-card-back {
    padding-top:50px;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .login-card-front {
    background-color: #9defff;
    color: black;
  }

  .login-card-back {
    background-color: #85deb5;
    color: white;
    transform: rotateY(180deg);
  }
  form {
    max-width:280px;
    margin : 0 auto;
  }
  form button,
  input.form-control {
    outline : none;
    box-shadow : none !important;
    height:48px;
  }
function rotateCard(e){
  e.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Loading...`
  e.disabled = true
  // Remove this timeout and replace it with ajax functionality
  setTimeout( function(){
    document.getElementById('innerCard').classList.add('rotateCard')
    e.innerHTML = "Next"
    e.disabled = false
  },2000 )
}
function login(e){
  e.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Loading...`
  e.disabled = true
  document.getElementById('goBackBtn').disabled = true
}
function goBack(){
  document.getElementById('password').value = ""
  document.getElementById('innerCard').classList.remove('rotateCard')
}

13. Form Swap

Feature both login and signup forms on the same page which can be swapped by clicking on each form.

Signup and login form swap
View code
<div class="vh-100 d-flex align-items-center">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-6 col-sm-8 col-xs-10 mx-auto">
        <div id="loginFrame" class="position-relative">
          <div id="signup" class="levelDown shadow bg-white card p-3">
            <h3 class="my-2">Signup</h3>
            <form action="" method="" onsubmit="" class='mx-3 my-3'>
              <div class="mb-3">
                <label for="fullname">Full Name</label>
                <input type="text" class="mt-2 form-control" id="fullname" name="fullname">
              </div>
              <div class="mb-3">
                <label for="email">Email</label>
                <input type="email" class="mt-2 form-control" id="email" name="email">
              </div>
              <div class="mb-4">
                <label for="password">Password</label>
                <input type="password" class="mt-2 form-control" id="password" name="password">
              </div>
              <div class="mb-2">
                <button class="btn btn-lg btn-primary w-100">Login</button>
              </div>
            </form>
          </div>
          <div id="login" class="levelUp shadow bg-white card p-3">
            <h3 class="my-2">Login</h3>
            <form action="" method="" onsubmit="" class='mx-3 my-3'>
              <div class="mb-3">
                <label for="email">Email</label>
                <input type="email" class="mt-2 form-control" id="email" name="email">
              </div>
              <div class="mb-2">
                <label for="password">Password</label>
                <input type="password" class="mt-2 form-control" id="password" name="password">
              </div>
              <div class="mb-2">
                <input type="checkbox" class="me-2" for="rememeberMe"> <label for="rememberMe">Remember Me</label>
              </div>
              <div class="mb-2">
                <button class="btn btn-lg btn-success w-100">Login</button>
              </div>
              <div class="mt-4 text-center">
                <a href="">Forgot Password?</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.form-control {
  height:48px;
}
#loginFrame {
  max-width : 420px;
  width:100%;
  margin:0 auto;
}
#login {
  cursor:pointer;
}
.levelUp {z-index : 9;transform : translateX(32px) translateY(32px);transition:all 300ms linear;}
.levelDown {z-index : 8;transform : translateX(-32px) translateY(-32px);transition:all 300ms linear;}

#signup {
  width:100%;
  position:absolute;
}

.levelDown:after {
  position:absolute;
  content:" ";
  width:100%;
  height:100%;
  left:0;
  top:0;
  background : rgba(0,0,0,0.7);
  border-radius:4px;
}

.levelDown:hover:after{
  cursor:pointer;
  background : rgba(0,0,0,0.1);
}
var signup = document.getElementById('signup')
var login = document.getElementById('login')

signup.onclick = function(e){
  e.target.className = e.target.className.replace('levelDown','levelUp')
  login.className = login.className.replace('levelUp','levelDown')
}

login.onclick = function(e){
  e.target.className = e.target.className.replace('levelDown','levelUp')
  signup.className = signup.className.replace('levelUp','levelDown')
}


Post a comment

I promise, I keep it clean *

Comments

No Comments to show

Alert SVG Cookie Consent

This website uses cookies and similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our Privacy policy.