Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Forms in Bootstrap 5
Forms Overview: Bootstrap provides extensive form controls with consistent styling across all devices and browsers.
Introduction to Bootstrap Forms
Bootstrap 5 provides a wide range of form controls, including input types, validation states, and layout options. All form controls are fully responsive and accessible.
Key Features
🎨
Consistent Styling
Uniform appearance across all form elements and input types.
📱
Responsive Design
Forms adapt to different screen sizes with responsive classes.
✅
Built-in Validation
Client-side form validation with visual feedback.
Form Components Overview
Bootstrap 5 includes these form components:
Basic Form Example
Complete Form Example
<form>
<!-- Text input -->
<div class="mb-3">
<label for="exampleName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="exampleName" placeholder="Enter your name">
</div>
<!-- Email input -->
<div class="mb-3">
<label for="exampleEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleEmail" placeholder="name@example.com">
</div>
<!-- Password input -->
<div class="mb-3">
<label for="examplePassword" class="form-label">Password</label>
<input type="password" class="form-control" id="examplePassword">
</div>
<!-- Select dropdown -->
<div class="mb-3">
<label for="exampleSelect" class="form-label">Country</label>
<select class="form-select" id="exampleSelect">
<option selected>Select country</option>
<option value="1">United States</option>
<option value="2">United Kingdom</option>
<option value="3">Canada</option>
</select>
</div>
<!-- Textarea -->
<div class="mb-3">
<label for="exampleTextarea" class="form-label">Message</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<!-- Checkbox -->
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck">
<label class="form-check-label" for="exampleCheck">I agree to terms</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>Form Layout Options
Vertical Forms (Default)
Stacked labels and inputs - the default Bootstrap form layout.
Horizontal Forms
Labels and inputs aligned horizontally using grid system.
Inline Forms
Multiple form controls on a single horizontal line.
Floating Labels
Labels that float above the input when focused.
Form Control Sizing
Next Steps
Continue Learning:
Now that you understand the basics of Bootstrap forms, explore these specific form components:
- Form Basics - Learn about form structure and basic elements
- Input Types - Explore different HTML5 input types
- Form Validation - Implement client-side validation
