Google Ad Slot: content-top

Bootstrap 5 Floating Label

~1 min read · Bootstrap

On this page

Floating labels in Bootstrap 5 allow placeholders inside form inputs to "float" above the input when the user starts typing. This creates a clean and user-friendly design.

Basic Floating Label:

To use floating labels, wrap an input or textarea and its associated <label> inside a container with the class .form-floating.

Email address

Example

Email address

Try it yourself

Floating Labels for Textarea:

The .form-floating class works with <textarea> as well. Ensure you include the placeholder attribute even if it’s empty.

Comments

Example

Comments

Try it yourself

Floating Labels with Select Menus:

Floating labels also work with <select> elements when styled as form-select. You must include a blank <option> element as the first option.

Choose an option

Example

Choose an option

Try it yourself

Input Types Supported:

Floating labels work seamlessly with various input types such as text, email, password, and number.

Password

Example

Password

Try it yourself

Validation with Floating Labels:

You can use validation classes (is-valid and is-invalid) with floating labels to indicate input validity.

Valid input

Looks good!

Invalid input

Please enter a valid value.

Example

Valid input

Looks good!

Invalid input

Please enter a valid value.

Try it yourself

Floating Label Form

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Floating Label

Basic Floating Label:

Floating Labels for Textarea:

Floating Labels with Select Menus:

Input Types Supported:

Validation with Floating Labels:

Cookie Consent & Privacy Preferences