Skip to main content

Floating labels

Create Material-inspired floating labels for text and select inputs by adding the .form-floating wrapper.

Basic example

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

Textareas

<div class="form-floating w-75">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Selects

<div class="form-floating w-75">
  <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>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

Validation

Please choose a valid email.
<div class="form-floating w-75">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="not an email">
  <label for="floatingInputInvalid">Invalid input</label>
  <div class="invalid-feedback"><span>Please choose a valid email.</span></div>
</div>