Core Code
Core Code Modern Dev Handbook

Floating Login Form

Build a login form using floating label inputs.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container py-5" style="max-width:400px">

<h4 class="mb-3">Login</h4>

<form>

<div class="form-floating mb-3">

<input type="email" class="form-control" id="loginEmail" placeholder="Email">

<label for="loginEmail">Email</label>

</div>

<div class="form-floating mb-3">

<input type="password" class="form-control" id="loginPass" placeholder="Password">

<label for="loginPass">Password</label>

</div>

<button class="btn btn-primary w-100">
Login
</button>

</form>

</div>

</body>
</html>

More BS5 Floating Labels Examples (7)

example Basic Floating Label open example example Floating Email Input open example example Floating Password Input open example example Floating Textarea open example example Floating Select open example example Multiple Floating Inputs open example example Floating Search Field open example