Floating labels

Example

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

Preview

Email address

Password

With Value

HTML

<div class="form-floating mb-3">
  <input
    type="email"
    class="form-control"
    id="floatingInput"
    placeholder="[email protected]"
  />
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input
    type="password"
    class="form-control"
    id="floatingPassword"
    placeholder="Password"
  />
  <label for="floatingPassword">Password</label>
</div>
<h5 class="mt-3">With Value</h5>
<form class="form-floating">
  <input
    type="email"
    class="form-control"
    id="floatingInputValue"
    placeholder="[email protected]"
    value="[email protected]"
  />
  <label for="floatingInputValue">Input with value</label>
</form>

Validation

Form validation styles also work as expected.

Preview

HTML

<form class="form-floating">
  <input
    type="email"
    class="form-control is-invalid"
    id="floatingInputInvalid"
    placeholder="[email protected]"
    value="[email protected]"
  />
  <label for="floatingInputInvalid">Invalid input</label>
</form>

Textareas

By default, <textarea>s with .form-control will be the same height as <input>s.

Preview

Comments

Explicit Height

Comments

HTML

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

Selects

Other than .form-control, floating labels are only available on .form-selects. They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state. Selects with size and multiple are not supported.

Preview

Works with selects

HTML

<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>

Layout

When working with the Bootstrap grid system, be sure to place form elements within column classes.

Preview

Email address

Works with selects

HTML

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input
        type="email"
        class="form-control"
        id="floatingInputGrid"
        placeholder="[email protected]"
        value="[email protected]"
      />
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select
        class="form-select"
        id="floatingSelectGrid"
        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="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>