Bootstrap FloatingLabels
Floating Labels Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Jumbotron Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h2 class="mb-4 text-primary">Floating Labels Form Example</h2>
<!-- Form Start -->
<form>
<!-- Text Input -->
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="Enter your name">
<label for="name">Name</label>
</div>
<!-- Email Input -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" placeholder="name@example.com">
<label for="email">Email address</label>
</div>
<!-- Password Input -->
<div class="form-floating mb-3">
<input type="password" class="form-control" id="password" placeholder="Password">
<label for="password">Password</label>
</div>
<!-- Select Dropdown -->
<div class="form-floating mb-3">
<select class="form-select" id="country" aria-label="Country">
<option selected>Select your country</option>
<option value="USA">United States</option>
<option value="CAN">Canada</option>
<option value="AUS">Australia</option>
</select>
<label for="country">Country</label>
</div>
<!-- Radio Buttons -->
<div class="mb-3">
<label class="form-label">Gender</label>
<div>
<input type="radio" class="form-check-input" name="gender" id="male" value="male">
<label class="form-check-label" for="male">Male</label>
</div>
<div>
<input type="radio" class="form-check-input" name="gender" id="female" value="female">
<label class="form-check-label" for="female">Female</label>
</div>
</div>
<!-- Checkboxes -->
<div class="mb-3">
<label class="form-label">Interests</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="sports">
<label class="form-check-label" for="sports">Sports</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="music">
<label class="form-check-label" for="music">Music</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="reading">
<label class="form-check-label" for="reading">Reading</label>
</div>
</div>
<!-- Date Picker -->
<div class="form-floating mb-3">
<input type="date" class="form-control" id="dob" placeholder="Date of Birth">
<label for="dob">Date of Birth</label>
</div>
<!-- File Upload -->
<div class="mb-3">
<label for="profilePic" class="form-label">Profile Picture</label>
<input type="file" class="form-control" id="profilePic">
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</form>
</div>
</body>
</html>