Floating labels

Create beautifully simple form labels that float over your input fields.

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., ~).

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

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

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

Form validation styles also work as expected.

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

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

To set a custom height on your <textarea>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS).

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

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

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