Bootstrap5 Form Floating Labels

By default, the label content is generally displayed above the input field:

With floating labels, labels can be inserted inside the input field, and when you click the input field, they float upward.

Bootstrap Example

<div class="form-floating mb-3 mt-3"> <input type="text" class="form-control" id="email" placeholder="Enter email" name="email"> <label for="email">Email</label> </div> <div class="form-floating mt-3 mb-3"> <input type="text" class="form-control" id="pwd" placeholder="Enter password" name="pswd"> <label for="pwd">Password</label> </div>

Try it yourself »

Notes:The <label> element must come after the <input> element, and each <input> element requires a placeholder attribute.

Text field

Textareas can also have the floating effect:

Bootstrap Example

<div class="form-floating"> <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea> <label for="comment">Comments</label> </div>

Try it yourself »

Select box

Floating labels can be used on select menus. They always appear in the upper-left corner of the select menu, without a click-to-float effect:

Bootstrap Example

<div class="form-floating"> <select class="form-select" id="sel1" name="sellist"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <label for="sel1" class="form-label">Select list (select one):</label> </div>

Try it yourself »
Other Extensions