{"slug": "design-a-clean-form-with-floating-labels-in-bootstrap-5", "title": "Design a Clean Form with Floating Labels in Bootstrap 5", "summary": "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.", "body_md": "Bootstrap 5 comes with built-in floating labels, but the default inputs can feel a bit too tall for compact forms.\nHere’s a cleaner version with a more balanced height and a simple card layout.\nThe HTML structure:\n<link\nhref=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\"\nrel=\"stylesheet\"\n/>\n<div class=\"container py-4\">\n<div class=\"row justify-content-center\">\n<div class=\"col-md-6\">\n<div class=\"card bg-white shadow-sm\">\n<div class=\"card-header h6 py-3 fw-bold\">\nRegister\n</div>\n<div class=\"card-body\">\n<form method=\"#\" autocomplete=\"off\">\n<div class=\"row\">\n<div class=\"col-md-6\">\n<div class=\"form-floating mb-3\">\n<input type=\"text\" class=\"form-control\" id=\"first_name\" name=\"first_name\" placeholder=\"First name\">\n<label for=\"first_name\">First name</label>\n</div>\n</div>\n<div class=\"col-md-6\">\n<div class=\"form-floating mb-3\">\n<input type=\"text\" class=\"form-control\" id=\"last_name\" name=\"last_name\" placeholder=\"Last name\">\n<label for=\"last_name\">Last name</label>\n</div>\n</div>\n</div>\n<div class=\"form-floating mb-3\">\n<input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" placeholder=\"Email address\">\n<label for=\"email\">Email address</label>\n</div>\n<div class=\"form-floating mb-3\">\n<input type=\"password\" class=\"form-control\" id=\"password\" name=\"password\" placeholder=\"Password\">\n<label for=\"password\">Password</label>\n</div>\n<div class=\"form-floating mb-3\">\n<input type=\"password\" class=\"form-control\" id=\"password_confirmation\" name=\"password_confirmation\" placeholder=\"Confirm Password\">\n<label for=\"password_confirmation\">Confirm Password</label>\n</div>\n<button type=\"submit\" class=\"btn btn-primary w-100\">\nRegister\n</button>\n</form>\n</div>\n</div>\n</div>\n</div>\n</div>\nWe need just a little bit of custom CSS:\n.form-floating > .form-control {\nheight: 48px;\nmin-height: 48px;\npadding: 1rem 0.75rem 0.25rem;\n}\n.form-floating > label {\npadding: 0.75rem;\n}\n.form-control:focus {\nbox-shadow: none;\n}\nAnd here's our nice form! 😊", "url": "https://wpnews.pro/news/design-a-clean-form-with-floating-labels-in-bootstrap-5", "canonical_source": "https://dev.to/zamfir80/clean-bootstrap-5-register-form-with-floating-labels-2noi", "published_at": "2026-05-22 20:57:52+00:00", "updated_at": "2026-05-22 21:34:16.991779+00:00", "lang": "en", "topics": [], "entities": ["Bootstrap"], "alternates": {"html": "https://wpnews.pro/news/design-a-clean-form-with-floating-labels-in-bootstrap-5", "markdown": "https://wpnews.pro/news/design-a-clean-form-with-floating-labels-in-bootstrap-5.md", "text": "https://wpnews.pro/news/design-a-clean-form-with-floating-labels-in-bootstrap-5.txt", "jsonld": "https://wpnews.pro/news/design-a-clean-form-with-floating-labels-in-bootstrap-5.jsonld"}}