Login pages using HTML, CSS, and Bootstrap

The login page provides the user with an interface to access the elements of your website. So, it an important page that a website can have.

Here, we have made several login pages using HTML, CSS, and Bootstrap according to the needs of the industry.

Simple Login

We can make the simple login page using HTML and Bootstrap. It will look as shown below.

simple login using HTML and bootstrap

The source code –

<!DOCTYPE html>
<html>
<head>
    <title>Login now</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    
<div class="container">
    <div class="d-flex justify-content-center align-items-center" >
        <div class="card mt-5">
        <div class="card-header">
          <h3>Login</h3>
        </div>
        <div class="card-body">
          <form method="post" action="">
          <div class="input-group form-group">
            <input type="text" class="form-control" placeholder="Username">
          </div>
          <div class="input-group form-group">
            <input type="password" class="form-control" placeholder="Password">
          </div>
          <div class="input-group form-group">
            <label>
            <input type="checkbox" name="remember_me" id="remember_me">
            Remember me on this computer
          </label>
          </div>
            <p class="submit"><input type="submit" name="commit" value="Login"></p>
          </form>
          <div>
            <p>Forgot your password? <a href="#">Click here to reset it</a>.</p>
          </div>
        </div>
        </div>
    </div>
</div>
</body>
</html>

Simple Login 2

This login page is made using HTML and CSS only. It looks as shown below.

simple login using HTML and CSS

The source code-

HTML source code

<html>
<head>
  <link rel="stylesheet" href="login2.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Log in</title>
</head>
<body>
  <div class="main">
    <h2 class="login">Log in</h2>
    <form class="form1">
      <input class="username " type="text" placeholder="Username">
      <input class="password" type="password" placeholder="Password">
      <input type="submit" class="submit" value="Log In">
        <p class="forgot"><a href="#">Forgot Password?</a></p>          
    </form>
    </div>   
</body>
</html>

CSS source code

.main {
    width: 350px;
    height: 350px;
    margin: 3em auto;
    border: 1px solid #069;
    border-radius: 1.2em;
    text-align: center;
    color:#069;
    background-color: white;
}
body {
    background-color:#fff;   
}
.login {
    margin-top: 1em;   
}
.username{
    margin: 1em 0;
    width: 80%;
    border: 1px solid black;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 18px;  
    background-color:inherit;
    color: inherit;   
}
.password {
    margin: 1em 0;
    width: 80%;
    border: 1px solid black;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 18px;
    background-color: inherit;
}
.submit {
    width: 80%;
    margin: 1em 1em;
    border: 1px solid black;
    font-size: 18px;
    padding: 2px;
    background-color: inherit;
    border-radius: 2em;
    color: inherit;
}
.form1 {
    padding: 1em;
}
.forgot {
    text-align: center;
    margin: 1em auto;
}
a {
    text-decoration: none;
    font-size: 18px;
    color: inherit;
}

Sign Up Page

This signup page is made only using HTML and bootstrap. You can signup using Google, Facebook or Microsoft or enter the details differently.

The source code –

<html>
<head>
  <link rel="stylesheet" href="login3.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Sign Up</title>
</head>
<body>
<div class="container">
    <div class="d-flex justify-content-center align-items-center" >
        <div class="card mt-5">
        <div class="card-header">
          <h3 class="d-flex justify-content-center">Sign Up for Free</h3>
        </div>
        <div class="card-body">
          <div>
            <a class="btn btn-outline-dark btn-block mb-2" href="#" role="button" style="text-transform:none">
              <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-up" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
              Sign Up with Google   
            </a>
          </div>
          <div>
            <a class="btn btn-outline-dark btn-block mb-2" href="#" role="button" style="text-transform:none">
              <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Facebook sign-up" src="https://cdn1.iconfinder.com/data/icons/social-media-2285/512/Colored_Facebook3_svg-512.png" />
              Sign Up with Facebook
            </a>
          </div>
          <div>
            <a class="btn btn-outline-dark btn-block mb-2" href="#" role="button" style="text-transform:none">
              <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Microsoft sign-up" src="http://www.pngplay.com/wp-content/uploads/1/Microsoft-Logo-Transparent-Background.png" />
              Sign Up with Microsoft
            </a>
          </div>
        </div>
        <div class="d-flex justify-content-center">
            OR SIGNUP WITH EMAIL 
        </div>
        <div class="card-body">
          <form method="post" action="">
        <div class="input-group form-group">
            <input type="text" class="form-control btn-outline-dark" placeholder="Username">
          </div>
          <div class="input-group form-group">
            <input type="email" class="form-control btn-outline-dark" placeholder="Email">
          </div>
          <div class="input-group form-group">
            <input type="password" class="form-control btn-outline-dark" placeholder="Password">
          </div>
          <div class="input-group form-group">
            <label>
            <input type="checkbox" name="remember_me" id="remember_me">
            Remember me on this computer
          </label>
          </div>
            <button type="button" class="btn btn-success btn-block">Sign Up</button>
          </form>
        </div>
        </div>
    </div>
</div> 
</body>
</html>

Leave a Reply