Design a Clean Form with Floating Labels in Bootstrap 5

This article explains how to create a more compact and visually balanced registration form in Bootstrap 5 using floating labels, a card layout, and custom CSS. The provided code reduces the default input height to 48 pixels and adjusts label padding for a cleaner appearance.

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 😊