Core Code
Core Code Modern Dev Handbook

Floating Select

Use floating labels with select menus.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container py-5">

<div class="form-floating">

<select class="form-select" id="countrySelect">

<option selected>Choose...</option>
<option>USA</option>
<option>Germany</option>
<option>Japan</option>

</select>

<label for="countrySelect">Country</label>

</div>

</div>

</body>
</html>

More BS5 Floating Labels Examples (7)

example Basic Floating Label open example example Floating Email Input open example example Floating Password Input open example example Floating Textarea open example example Multiple Floating Inputs open example example Floating Login Form open example example Floating Search Field open example