Design a Clean Form with Floating Labels in Bootstrap 5

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! 😊