logo
image
Timotheus Bendan
Sales Manager
Profile Inbox Settings Logout
Floating labels
  • Shopping Cart
    ...
    Digital clock
    1 x $1.190,90
    ...
    Toy Car
    1 x $139.58
    ...
    Sunglasses
    2 x $50,90
    ...
    Cake
    1 x $10,50
    Sub Total:$1.442,78

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-floatingto enable floating labels with Bootstrap’s textual form fields. A placeholderis required on each <input>as our method of CSS-only floating labels uses the :placeholder-shownpseudo-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="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>

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

<form class="form-floating"><input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com"><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="name@example.com" value="test@example.com"><label for="floatingInputInvalid">Invalid input</label></form>

Textareas

By default,<textarea>s with .form-controlwill 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 rowsattribute. 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. 

<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="name@example.com" value="mdo@example.com"><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>
On this page