## Floating labels

Create beautifully simple form labels that float over your input fields.

Floating labels on Bootstrap

#### Example

    <div class="form-floating mb-3">
      <input class="form-control" id="floatingInput" type="email" placeholder="name@example.com" />
      <label for="floatingInput">Email address</label>
    </div>
    <div class="form-floating">
      <input class="form-control" id="floatingPassword" type="password" placeholder="Password" />
      <label for="floatingPassword">Password</label>
    </div>

Email address
Password

#### Icon example

    <div class="form-icon-container">
      <div class="form-floating mb-3"><input class="form-control form-icon-input" id="floatingInputIconExample" type="email" placeholder="name@example.com" /><label class="form-icon-label" for="floatingInputIconExample">Email address</label></div>
      <span class="fa-solid fa-envelope text-body fs-9 form-icon"></span>
    </div>

Email address

#### Validation

    <div class="form-floating mb-3">
      <input class="form-control is-valid" id="floatingInputValid" type="email" placeholder="name@example.com" value="test@example.com" />
      <label for="floatingInputValid">Valid input</label>
    </div>
    <div class="form-floating">
      <input class="form-control is-invalid" id="floatingInputInvalid" type="email" placeholder="name@example.com" value="test@example.com" />
      <label for="floatingInputInvalid">Invalid input</label>
    </div>

Valid input
Invalid input

#### Textareas

    <div class="form-floating">
      <textarea class="form-control" id="floatingTextarea2" placeholder="Leave a comment here" style="height: 100px"></textarea>
      <label for="floatingTextarea2">Comments</label>
    </div>

Comments

#### Selects

    <div class="form-floating">
      <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
        <option selected="">Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelect">Works with selects</label>
    </div>

Works with selects

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize