Floating Labels

Example

For floating labels, use .form-floating class on the .form-group container.

Email address

Password

HTML Code for this Element

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

Textarea

Textarea with floating label

Comments

HTML Code for this Element

<div class="form-floating">
	<textarea class="form-control" placeholder="Leave a comment here" style="height: 150px"></textarea>
	<label for="floatingTextarea2">Comments</label>
</div>

Radio

Form Select with floating label

Works with selects

HTML Code for this Element

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

With Validation

Form floating with validation styles

HTML Code for this Element

<form class="form-floating">
	<input type="email" class="form-control is-valid" id="floatingInputValid" placeholder="name@example.com" value="test@example.com">
	<label for="floatingInputValid">Correct input</label>
</form>

Disabled

Add .disabled to inputs to make them appear disabled.

Email address

Comments

Works with selects

HTML Code for this Element

<div class="form-floating mb-3">
	<input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
	<label for="floatingInputDisabled">Email address</label>
</div>
<div class="form-floating mb-3">
	<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
	<label for="floatingTextareaDisabled">Comments</label>
</div>
	<div class="form-floating mb-3">
	<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled></textarea>
	<label for="floatingTextarea2Disabled">Comments</label>
</div>
<div class="form-floating">
	<select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
		<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="floatingSelectDisabled">Works with selects</label>
</div>