How To Login Form in Bootstrap 5
How to design and build the Login Form is shown in this image.
Step 1:
1. Create a new index.html file in your project root. Include the tag as well for proper responsive behavior in mobile devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Template</title>
</head>
<body>
</body>
</html>
2. Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>. Add Font Awesome CDN to your website
</head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> </head>
3. Finally add your simple code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<Style>
body {
font-family:'Poppins', sans-serif;
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
.btn-login {
font-size: 0.9rem;
letter-spacing: 0.05rem;
padding: 0.75rem 1rem;
}
.btn-google {
color: white !important;
background-color: #ea4335;
}
.btn-google:hover {
background-color: green;
}
.btn-facebook:hover {
background-color: green;
}
.btn-facebook {
color: white !important;
background-color: #3b5998;
}
</Style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card border-0 shadow rounded-3 my-5">
<div class="card-body p-4 p-sm-5">
<h5 class="card-title text-center mb-5 fw-light fs-5">Sign In</h5>
<form>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="rememberPasswordCheck">
<label class="form-check-label" for="rememberPasswordCheck">
Remember password
</label>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-login text-uppercase fw-bold" type="submit">Sign
in</button>
</div>
<hr class="my-4">
<div class="d-grid mb-2">
<button class="btn btn-google btn-login text-uppercase fw-bold" type="submit">
<i class="fab fa-google me-2"></i> Sign in with Google
</button>
</div>
<div class="d-grid">
<button class="btn btn-facebook btn-login text-uppercase fw-bold" type="submit">
<i class="fab fa-facebook-f me-2"></i> Sign in with Facebook
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
0 Comments