<main class="form-signin text-center">
  <form>

    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

    <div class="form-floating">
            <!--<label for="floatingInput">Email address</label>-->
      <input type="email" class="form-control form-control-lg" id="floatingInput" placeholder="name@example.com">
    </div>
    <div class="form-floating">
      <!--<label for="floatingPassword">Password</label>-->
      <input type="password" class="form-control form-control-lg" id="floatingPassword" placeholder="Password"
    </div>

    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
    <p class="mt-5 mb-3 text-muted">Copyright &copy; 2021</p>
  </form>
</main>
html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin label {
  margin: 1em auto;
  font-size: 700;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.