Login Page Bootstrap 5 Templates

Templates


author small image Siva Kishore G
Posted : 11 March 2022
Modified : 06 Jun 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 = ""
  }


Post a comment

I promise, I keep it clean *

Comments

No Comments to show

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.