”;
This chapter will discuss about Bootstrap floating labels. Floating labels refer to form labels that float over the input fields.
Basic example
-
To allow floating labels with Bootstrap”s textual form fields, include a pair of <input class=”form-control”> and <label> elements in .form-floating.
-
Each <input> must have a placeholder since the technique for CSS-only floating labels employs the :placeholder-shown pseudo-element. The <input> needs to be placed first to make use of a sibling selector like (~).
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-floating mb-3 mt-2">
<input type="text" class="form-control" id="floatingUsername" placeholder="tutorialspoint@example.com">
<label for="floatingUsername">Username</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
</body>
</html>
When a value is already assigned, <label> elements will automatically align their position to float over the input field.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form class="form-floating mt-2">
<input type="email" class="form-control" id="floatingInputValue" placeholder="tutorialspoint@example.com" value="tutorialspoint@example.com">
<label for="floatingInputValue">Username</label>
</form>
</body>
</html>
By using form validation styles like is-invalid, you can provide visual feedback to users when they submit incorrect data.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form class="form-floating">
<input type="text" class="form-control is-invalid" id="floatingInvalidInput" placeholder="Password" value="Password">
<label for="floatingInvalidInput">Invalid Password</label>
</form>
</body>
</html>
Textareas
The height of <textarea> with the class .form-control is automatically set to have the same height as <input>.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-floating">
<textarea class="form-control" placeholder="Text Here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Text Here</label>
</div>
</body>
</html>
Don”t use the rows attribute if you want to customize the height of your <textarea>. Instead, specify a height explicitly (either inline or using customized CSS). In the below example we have used inline styling.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-floating">
<textarea class="form-control" placeholder="Add a comment" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">Add a comment</label>
</div>
</body>
</html>
Selects
-
Floating labels are only accessible on .form-selects, in addition to .form-control.
-
The same concepts apply to them, except unlike <input>s, they always display the <label> in its floated state. Size-based and multiple selects are not supported.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select menu">
<option selected>Language</option>
<option value="1">English</option>
<option value="2">Hindi</option>
<option value="3">Marathi</option>
</select>
<label for="floatingSelect">Others</label>
</div>
</body>
</html>
Disabled
Add the disabled boolean attribute on an input. This gives grayed-out appearance to an input, textarea, or select. It also removes pointer events, and prevents focusing.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="name" disabled>
<label for="floatingInputDisabled">Name</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="tutorialspoint@example.com" id="floatingEmailDisabled" disabled></textarea>
<label for="floatingEmailDisabled">Email Id</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Add a comment" id="floatingTextareaDisabled" style="height: 120px" disabled></textarea>
<label for="floatingTextareaDisabled">Add a comment</label>
</div>
<div class="form-floating">
<select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
<option selected>Select Language</option>
<option value="1">English</option>
<option value="2">Hindi</option>
<option value="3">Marathi</option>
</select>
<label for="floatingSelectDisabled">Others</label>
</div>
</body>
</html>
Readonly plaintext
When switching from an editable <input> to a plaintext value without changing the page layout, .form-control-plaintext can be useful.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="form-floating mb-3 mt-2">
<input type="text" readonly class="form-control" id="floatingEmptyPlaintextInput" style="height: 80px" placeholder="Block the comment" value="Block the comment">
<label for="floatingEmptyPlaintextInput">Block the comment</label>
</div>
<div class="form-floating mb-3">
<input type="text" readonly class="form-control" id="floatingPlaintextInput" style="height: 80px" placeholder="Add a comment" value="Add a comment">
<label for="floatingPlaintextInput">Add a comment</label>
</div>
</body>
</html>
Input groups
Similarly, floating labels support .input-group.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="input-group mb-3">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGroup" placeholder="email">
<label for="floatingInputGroup">Email Id</label>
</div>
<span class="input-group-text">tutorialspoint@example.com</span>
</div>
</body>
</html>
The -feedback (it is a validation class to provide valuable feedback to users before submitting the form.) should be positioned outside of the .form-floating but inside of the .input-group when using .input-group and .form-floating along with form validation.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="input-group has-validation">
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup" placeholder="Password" required>
<label for="floatingInputGroup">Password</label>
</div>
<div class="invalid-feedback">
Wrong Password
</div>
</div>
</body>
</html>
Layout
-
When using a grid system, the implementation of floating labels layout becomes beneficial as it enables the placement of form elements within column classes.
-
There is no pre-defined classes in bootstrap, so we must utilize form classes and position them according to our requirement.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Floating Labels</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingGrid" placeholder="tutorialspoint@example.com" value="tutorialspoint@example.com">
<label for="floatingGrid">Email Id</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Language</option>
<option value="1">English</option>
<option value="2">Hindi</option>
<option value="3">Marathi</option>
</select>
<label for="floatingSelectGrid">Others</label>
</div>
</div>
</div>
</html>
”;