Bootstrap 5 Forms Guide
Forms are an essential part of web development, and Bootstrap 5 provides a powerful, responsive, and easy-to-use form system. This guide covers all Bootstrap 5 form elements, from basic inputs to validation and layout customization.
1. Basic Form Structure
Bootstrap 5 forms use the .form-control class for styling input fields and .form-label for labels.
<form class="container mt-4">
<div class="mb-3">
<label class="form-label">Email:</label>
<input type="email" class="form-control" placeholder="Enter your email">
</div>
<div class="mb-3">
<label class="form-label">Password:</label>
<input type="password" class="form-control" placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
2. Different Input Types
Bootstrap supports various input types with .form-control.
<form class="container mt-4">
<div class="mb-3">
<label class="form-label">Text:</label>
<input type="text" class="form-control" placeholder="Enter text">
</div>
<div class="mb-3">
<label class="form-label">Number:</label>
<input type="number" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Date:</label>
<input type="date" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">File Upload:</label>
<input type="file" class="form-control">
</div>
</form>
3. Checkboxes & Radio Buttons
Use .form-check for checkboxes and radio buttons.
<form class="container mt-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">I agree to the terms</label>
</div>
<div class="mt-3">
<label>Choose an option:</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="option" id="option1">
<label class="form-check-label" for="option1">Option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="option" id="option2">
<label class="form-check-label" for="option2">Option 2</label>
</div>
</div>
</form>
4. Select Dropdown & Textarea
Use .form-select for dropdowns and .form-control for textareas.
<form class="container mt-4">
<div class="mb-3">
<label class="form-label">Select an option:</label>
<select class="form-select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Comments:</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
5. Form Layouts
Inline Form (All elements in one line)
Use .row and .col for proper alignment.
<form class="container mt-4">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
Floating Labels
Use .form-floating for modern floating label styling.
<form class="container mt-4">
<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>
</form>
6. Form Validation
Bootstrap 5 provides built-in validation classes:
.is-invalid(invalid state).is-valid(valid state)
<form class="container mt-4">
<div class="mb-3">
<label class="form-label">Email:</label>
<input type="email" class="form-control is-invalid" placeholder="Invalid email">
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
<div class="mb-3">
<label class="form-label">Username:</label>
<input type="text" class="form-control is-valid" placeholder="Valid username">
<div class="valid-feedback">Looks good!</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
7. Input Groups (Icons & Buttons Inside Inputs)
Use .input-group to add elements inside input fields.
<form class="container mt-4">
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</form>
8. Disabled & Readonly Inputs
Use disabled for uneditable fields and readonly for fields that users cannot edit but can copy.
<form class="container mt-4">
<input type="text" class="form-control" value="Disabled input" disabled>
<input type="text" class="form-control mt-3" value="Readonly input" readonly>
</form>
9. Dark Mode Forms
Use .bg-dark and .text-white for dark-themed forms.
<form class="container bg-dark text-white p-4 mt-4">
<div class="mb-3">
<label class="form-label">Username:</label>
<input type="text" class="form-control bg-secondary text-white">
</div>
<button type="submit" class="btn btn-light">Submit</button>
</form>
10. Full Example (Complete Bootstrap 5 Form with Validation & Features)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Forms</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap 5 Complete Form</h2>
<form>
<div class="mb-3">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" placeholder="Enter full name">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control is-invalid" placeholder="Enter email">
<div class="invalid-feedback">Invalid email address.</div>
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Accept Terms</label>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</body>
</html>
Conclusion
This guide covers everything you need to master Bootstrap 5 forms! Let me know if you need more examples or projects.
0 comments:
Post a Comment