Saturday, June 22, 2024
HomeCSSBootstrap 5 - Responsive Login Type - csshint

Bootstrap 5 – Responsive Login Type – csshint










The right way to create Responsive Login Type utilizing Bootstrap 5. Designed by Meb Zone a codepen person.

Navigation Menu expand On Click

<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









RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments