Bootstrap Floating Labels Example
Create beautifully simple form labels that float over your input fields.
Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<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 >
</body >
</html >
Bootstrap Floating Labels Example
When there’s a value already defined, <label> s will automatically adjust to their floated position.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<form class ="form-floating" >
<input type ="email" class ="form-control" id ="floatingInputValue" placeholder ="KaashivInfotech.com" value ="KaashivInfotech@gmail.com" >
<label for ="floatingInputValue" > Input with value</label >
</form >
</body >
</html >
Bootstrap Validation Styles Work
Bootstrap provides various validation styles to indicate error, success, and warning states for form controls.
You need to add the .is-invalid or .is-valid class to the form control element, depending on whether the input is invalid or valid.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<form class ="form-floating" >
<input type ="email" class ="form-control is-invalid" id ="floatingInputInvalid" placeholder ="KaashivInfotech@gmail.com" value ="KaashivInfotech@gmail.com" >
<label for ="floatingInputInvalid" > Invalid input</label >
</form >
</body >
</html >
Bootstrap Floating Lable Textareas Example 1
By default, <textarea>s with .form-control will be the same height as <input>s .
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-floating" >
<textarea class ="form-control" placeholder ="Leave a comment here" id ="floatingTextarea" > </textarea >
<label for ="floatingTextarea" > Comments</label >
</div >
</body >
</html >
Bootstrap Floating Lable Textareas Example 2
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<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 >
</body >
</html >
Bootstrap Floating Lable Selects
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.
Selects with size and multiple are not supported.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<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" > Kaashiv</option >
<option value ="2" > Wikitechy</option >
<option value ="3" > KaashivInfotech</option >
</select >
<label for ="floatingSelect" > Works with selects</label >
</div >
</body >
</html >
Bootstrap Floating Lables Readonly plaintext
Floating labels also support .form-control-plaintext , which can be helpful for toggling from an editable <input> to a plaintext value without affecting the page layout.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-floating mb-3" >
<input type ="email" readonly ="" class ="form-control-plaintext" id ="floatingEmptyPlaintextInput" placeholder ="KaashivInfotech@gmail.com" >
<label for ="floatingEmptyPlaintextInput" > Empty input</label >
</div >
<div class ="form-floating mb-3" >
<input type ="email" readonly ="" class ="form-control-plaintext" id ="floatingPlaintextInput" placeholder ="KaashivInfotech@gmail.com" value ="KaashivInfotech@gmail.com" >
<label for ="floatingPlaintextInput" > Input with value</label >
</div >
</body >
</html >
Bootstrap Floating Lable Input groups Example 1
Floating labels also support .input-group.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="input-group mb-3" >
<span class ="input-group-text" > @</span >
<div class ="form-floating" >
<input type ="text" class ="form-control" id ="floatingInputGroup1" placeholder ="Username" >
<label for ="floatingInputGroup1" > Username</label >
</div >
</div >
</body >
</html >
Bootstrap Floating Lable Input groups Example 2
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="input-group has-validation" >
<span class ="input-group-text" > @</span >
<div class ="form-floating is-invalid" >
<input type ="text" class ="form-control is-invalid" id ="floatingInputGroup2" placeholder ="Username" required ="" >
<label for ="floatingInputGroup2" > Username</label >
</div >
<div class ="invalid-feedback" >
Please choose a username.
</div >
</div >
</body >
</html >
Bootstrap Floating Lable Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="row g-2" >
<div class ="col-md" >
<div class ="form-floating" >
<input type ="email" class ="form-control" id ="floatingInputGrid" placeholder ="KaashivInfotech.com" value ="KaashivInfotech.com" >
<label for ="floatingInputGrid" > Email address</label >
</div >
</div >
<div class ="col-md" >
<div class ="form-floating" >
<select class ="form-select" id ="floatingSelectGrid" >
<option selected ="" > Open this select menu</option >
<option value ="1" > Kaashiv</option >
<option value ="2" > Wikitechy</option >
<option value ="3" > KaashivInfotech</option >
</select >
<label for ="floatingSelectGrid" > Works with selects</label >
</div >
</div >
</div >
</body >
</html >
