Floating Input
Basic Floating Label
The Basic Floating Label uses the .form-floating class
to create a smooth floating effect for input labels, keeping the form clean and user-friendly.
Floating Label With Values
The Floating Label With Values keeps labels visible inside the input field, even when users enter text, ensuring a clear and consistent form experience.
Invalid Floating Label
The Invalid Floating Label highlights an input field with an error state using
the .is-invalid class, ensuring users can easily identify and correct mistakes.
Readonly plaintext
The Readonly Plaintext displays input as plain text using
the .form-control-plaintext class, making it uneditable while keeping the default styling.
Floating Textarea
The Floating Textarea uses the
.form-floating class to add a floating label to a textarea,
providing a clean and modern input field design.
Floating Select
The Floating Select example uses the
.form-floating class to create a floating label effect for a select dropdown,
offering a sleek and modern form design.
Floating Input groups
The Floating Input Groups example shows how to use
.form-floating with input groups to create a modern floating label effect for form fields.
Floating Input groups sizing
The Floating Input Groups Sizing example demonstrates how to apply different sizes to floating input groups using the .form-control-sm and .form-control-lg classes for smaller and larger input fields.