Centered Login Card

<div class="container d-flex justify-content-center align-items-center min-vh-100 py-5">
  <div class="card shadow-lg border-0 w-100 rounded-4" style="max-width:450px;">
    <div class="card-body p-4 p-md-5">
      <div class="text-center mb-4">
        <div class="bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:60px;height:60px;"><i class="bi bi-shield-lock-fill fs-2"></i></div>
        <h3 class="fw-bold">Secure Login</h3>
        <p class="text-muted small">Enter your credentials to continue</p>
      </div>
      <form id="customLoginForm">
        <div class="form-floating mb-3"><input type="text" class="form-control" id="usernameInput" placeholder="Username" required><label for="usernameInput"><i class="bi bi-person me-2 text-muted"></i>Username</label></div>
        <div class="form-floating mb-3"><input type="password" class="form-control" id="passwordInput" placeholder="Password" required><label for="passwordInput"><i class="bi bi-lock me-2 text-muted"></i>Password</label></div>
        <div class="d-flex justify-content-between align-items-center mb-4 small">
          <div class="form-check"><input class="form-check-input" type="checkbox" id="rememberMe"><label class="form-check-label text-muted" for="rememberMe">Remember me</label></div>
          <a href="#" class="text-primary text-decoration-none fw-medium">Forgot password?</a>
        </div>
        <button class="btn btn-primary w-100 py-3 fw-bold rounded-3" type="submit">Sign In <i class="bi bi-arrow-right ms-1"></i></button>
      </form>
      <div class="text-center mt-4 pt-3 border-top small text-muted">Don't have an account? <a href="#" class="text-primary fw-bold text-decoration-none">Register Now</a></div>
    </div>
  </div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="loginSuccessToast" class="toast align-items-center text-bg-success border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body fw-medium"><i class="bi bi-check-circle-fill me-2"></i>Authentication successful!</div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  </div>
</div>