Bootstrap 5 Form Floating Labels - What are floating labels in Bootstrap

Create beautifully simple form labels that float over your input fields.
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., ~).

how-to-create-floating-label-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="form-floating 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">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>
  </body>
</html>

Output

Bootstrap Floating Labels Example

Sample Code

When there’s a value already defined, <label>s will automatically adjust to their floated position.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <form class="form-floating">
      <input type="email" class="form-control" id="floatingInputValue" placeholder="KaashivInfotech.com" value="KaashivInfotech@gmail.com">
      <label for="floatingInputValue">Input with value</label>
    </form>
  </body>
</html>

Output

Bootstrap Validation Styles Work

Bootstrap provides various validation styles to indicate error, success, and warning states for form controls.
You need to add the .is-invalid or .is-valid class to the form control element, depending on whether the input is invalid or valid.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <form class="form-floating">
      <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="KaashivInfotech@gmail.com" value="KaashivInfotech@gmail.com">
      <label for="floatingInputInvalid">Invalid input</label>
    </form>
  </body>
</html>

Output

Bootstrap Floating Lable Textareas Example 1

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

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="form-floating">
      <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
      <label for="floatingTextarea">Comments</label>
    </div>
  </body>
</html>

Output

Bootstrap Floating Lable Textareas Example 2

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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>
  </body>
</html>

Output

Bootstrap Floating Lable Selects

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.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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">Kaashiv</option>
        <option value="2">Wikitechy</option>
        <option value="3">KaashivInfotech</option>
      </select>
      <label for="floatingSelect">Works with selects</label>
    </div>
  </body>
</html>

Output

Bootstrap Floating Lables Readonly plaintext

Floating labels also support .form-control-plaintext, which can be helpful for toggling from an editable <input> to a plaintext value without affecting the page layout.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="form-floating mb-3">
      <input type="email" readonly="" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="KaashivInfotech@gmail.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="KaashivInfotech@gmail.com" value="KaashivInfotech@gmail.com">
      <label for="floatingPlaintextInput">Input with value</label>
    </div>
  </body>
</html>

Output

Bootstrap Floating Lable Input groups Example 1

Floating labels also support .input-group.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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>
  </body>
</html>

Output

Bootstrap Floating Lable Input groups Example 2

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="input-group has-validation">
      <span class="input-group-text">@</span>
      <div class="form-floating is-invalid">
        <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required="">
        <label for="floatingInputGroup2">Username</label>
      </div>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </body>
</html>

Output

Bootstrap Floating Lable Layout

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

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="row g-2">
      <div class="col-md">
        <div class="form-floating">
          <input type="email" class="form-control" id="floatingInputGrid" placeholder="KaashivInfotech.com" value="KaashivInfotech.com">
          <label for="floatingInputGrid">Email address</label>
        </div>
      </div>
      <div class="col-md">
        <div class="form-floating">
          <select class="form-select" id="floatingSelectGrid">
            <option selected="">Open this select menu</option>
            <option value="1">Kaashiv</option>
            <option value="2">Wikitechy</option>
            <option value="3">KaashivInfotech</option>
          </select>
          <label for="floatingSelectGrid">Works with selects</label>
        </div>
      </div>
    </div>
  </body>
</html>

Output

Bootstrap 5 Form Floating Labels - What are floating labels in Bootstrap

Bootstrap Floating Labels Example

Sample Code

Output

Bootstrap Floating Labels Example

Sample Code

Output

Bootstrap Validation Styles Work

Sample Code

Output

Bootstrap Floating Lable Textareas Example 1

Sample Code

Output

Bootstrap Floating Lable Textareas Example 2

Sample Code

Output

Bootstrap Floating Lable Selects

Sample Code

Output

Bootstrap Floating Lables Readonly plaintext

Sample Code

Output

Bootstrap Floating Lable Input groups Example 1

Sample Code

Output

Bootstrap Floating Lable Input groups Example 2

Sample Code

Output

Bootstrap Floating Lable Layout

Sample Code

Output

Related Searches to Bootstrap 5 Form Floating Labels - What are floating labels in Bootstrap

Wikitechy

Workshop

Join our Community

Other Languages