Floating Label in Bootstrap 5.3

In Bootstrap 5.3, floating labels are a form design feature that provides an elegant and interactive way to display labels for form inputs. A floating label appears above the form input when the user interacts with it, such as clicking on the input field or entering text. The floating label then moves up and floats above the input, providing context and guidance to the user.

Floating Label in Bootstrap

Floating labels in Bootstrap 5.3 improve the usability and aesthetics of forms by providing a visually appealing way to display labels. They enhance the user experience by providing context and guidance when filling out forms.

To use floating labels, you need to include the necessary Bootstrap CSS and JavaScript files, as they provide the required styles and JavaScript functionality for the floating label feature to work correctly.

In Bootstrap 5.3, the .form-floating class is used to create floating labels for form inputs. When applied to a container element, such as a <div>, it enables the floating label functionality for the associated form input.

Here's an example of using the .form-floating class in Bootstrap 5.3:

<div class="mb-3 form-floating">
    <input type="text" id="email" class="form-control" placeholder="Email Address" />
    <label for="email">Email Address</label>
</div>

Works with selects

In Bootstrap 5.3, the .form-floating class can also be used with <select> elements to create floating labels for dropdown menus. This allows you to apply the floating label style and functionality to select inputs in your forms.

Here's an example of using the .form-floating class with a <select> element in Bootstrap 5.3:

<div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect">
      <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>

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Floating in Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/base.css" />
  </head>
  <body>
    <div class="container my-5">
      <h4 class="text-danger mb-3">Floating Label in Bootstrap</h4>

      <div class="row">
        <div class="col-6">
          <p class="fw-semibold text-primary border-bottom border-primary py-3">Floating Label in Bootstrap</p>
          <div class="mb-3 form-floating">
            <input type="text" id="email" class="form-control" placeholder="Email Address" />
            <label for="email">Email Address</label>
          </div>
          <div class="mb-3 form-floating">
            <input type="password" id="email" class="form-control" placeholder="Password" />
            <label for="email">Password</label>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">If value already defined label will automatically adjuct to floated Position</p>

          <div class="mb-3 form-floating">
            <input type="text" id="name" class="form-control" placeholder="Full Name" value="Tutor Joes" />
            <label for="name">Full Name</label>
          </div>
          <p class="fw-semibold text-primary border-bottom border-primary py-3">Form Validation Class</p>
          <div class="mb-3 form-floating">
            <input type="text" id="fname" class="form-control is-invalid" placeholder="First Name" value="test" />
            <label for="fname">First Name</label>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Textarea</p>
          <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">Comments</label>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Selects</p>
          <div class="form-floating mb-3">
            <select class="form-select" id="floatingSelect">
              <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>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Readonly plaintext</p>
          <div class="form-floating mb-3">
            <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com" />
            <label for="floatingEmptyPlaintextInput">Empty input</label>
          </div>
          <div class="form-floating mb-3">
            <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com" />
            <label for="floatingPlaintextInput">Input with value</label>
          </div>

          <p class="fw-semibold text-primary border-bottom border-primary py-3">Input Groups</p>
          <div class="input-group mb-3">
            <span class="input-group-text">@</span>
            <div class="form-floating">
              <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username" />
              <label for="floatingInputGroup1">Username</label>
            </div>
          </div>

          <div class="input-group mb-3 has-validation">
            <span class="input-group-text">@</span>
            <div class="form-floating is-invalid">
              <input type="text" id="txt" placeholder="username" class="form-control is-invalid" />
              <label for="txt">Username</label>
            </div>

            <div class="invalid-feedback">Please Enter Username</div>
          </div>
          <!--col-6-->
        </div>
      </div>

      <div class="row g-2">
        <div class="col-md-4">
          <div class="form-floating">
            <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com" />
            <label for="floatingInputGrid">Email address</label>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-floating">
            <select class="form-select" id="floatingSelectGrid">
              <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>
      <!--Container end -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview