Bootstrap 5 comes with built-in floating labels, but the default inputs can feel a bit too tall for compact forms.
Here’s a cleaner version with a more balanced height and a simple card layout.
The HTML structure:
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card bg-white shadow-sm">
<div class="card-header h6 py-3 fw-bold">
Register
</div>
<div class="card-body">
<form method="#" autocomplete="off">
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First name">
<label for="first_name">First name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name">
<label for="last_name">Last name</label>
</div>
</div>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" name="email" placeholder="Email address">
<label for="email">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
<label for="password">Password</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password">
<label for="password_confirmation">Confirm Password</label>
</div>
<button type="submit" class="btn btn-primary w-100">
Register
</button>
</form>
</div>
</div>
</div>
</div>
</div>
We need just a little bit of custom CSS:
.form-floating > .form-control {
height: 48px;
min-height: 48px;
padding: 1rem 0.75rem 0.25rem;
}
.form-floating > label {
padding: 0.75rem;
}
.form-control:focus {
box-shadow: none;
}
And here's our nice form! 😊