The right way to create Responsive Login Type utilizing Bootstrap 5. Designed by Meb Zone a codepen person.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 - Login Type</title>
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.web/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" />
</head>
<physique class="main-bg">
<!-- Login Type -->
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="card shadow">
<div class="card-title text-center border-bottom">
<h2 class="p-3">Login</h2>
</div>
<div class="card-body">
<kind>
<div class="mb-4">
<label for="username" class="form-label">Username/E mail</label>
<enter kind="textual content" class="form-control" id="username" />
</div>
<div class="mb-4">
<label for="password" class="form-label">Password</label>
<enter kind="password" class="form-control" id="password" />
</div>
<div class="mb-4">
<enter kind="checkbox" class="form-check-input" id="bear in mind" />
<label for="bear in mind" class="form-label">Bear in mind Me</label>
</div>
<div class="d-grid">
<button kind="submit" class="btn text-light main-bg">Login</button>
</div>
</kind>
</div>
</div>
</div>
</div>
</div>
</physique>
</html>
:root{
--main-bg:#e91e63;
}
.main-bg {
background: var(--main-bg) !essential;
}
enter:focus, button:focus {
border: 1px stable var(--main-bg) !essential;
box-shadow: none !essential;
}
.form-check-input:checked {
background-color: var(--main-bg) !essential;
border-color: var(--main-bg) !essential;
}
.card, .btn, enter{
border-radius:0 !essential;
}
Bootstrap 5 – Responsive Login Type
