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>

Icon example

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

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>

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>

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>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize