Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Form Basics
Form Basics: Learn the fundamental structure and styling of Bootstrap 5 forms.
Basic Form Structure
Every Bootstrap form follows a consistent structure with form controls wrapped in containers.
Complete Form Example
<!-- Basic Form Structure -->
<form>
<!-- Form Group Container -->
<div class="mb-3">
<!-- Form Label -->
<label for="basicName" class="form-label">Full Name</label>
<!-- Form Control -->
<input
type="text"
class="form-control"
id="basicName"
placeholder="Enter your full name"
required
/>
</div>
<!-- Another Form Group with Help Text -->
<div class="mb-3">
<label for="basicEmail" class="form-label">Email Address</label>
<input
type="email"
class="form-control"
id="basicEmail"
placeholder="you@example.com"
required
/>
<!-- Help Text -->
<div class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<!-- Checkbox -->
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="basicTerms" />
<label class="form-check-label" for="basicTerms">
I agree to the terms
</label>
</div>
<!-- Form Buttons -->
<button type="submit" class="btn btn-primary">Register</button>
<button type="reset" class="btn btn-outline-secondary ms-2">Reset</button>
</form>Form Control Classes
.form-control
Base class for all text-based form controls.
.form-select
Class for custom styled select dropdowns.
.form-check
Container for checkboxes and radio buttons.
Form Labels
Label Types and Usage
Regular Labels
Required Field Indicators
Hidden Labels (Screen Reader Only)
<!-- Regular Label -->
<label for="regularLabel" class="form-label">Regular Form Label</label>
<input type="text" class="form-control" id="regularLabel" />
<!-- Required Field Indicator -->
<label for="requiredLabel" class="form-label">
Required Field <span class="text-danger">*</span>
</label>
<input type="text" class="form-control" id="requiredLabel" required />
<!-- Screen Reader Only Label -->
<label for="hiddenLabel" class="visually-hidden">Search</label>
<input type="search" class="form-control" id="hiddenLabel" placeholder="Search..." />Form Help Text
Basic Help Text
Choose a unique username that others will recognize.
Small Help Text
Must be 8-20 characters long, contain letters and numbers.
Block-level Help Text
Note: Provide detailed information about your project. Include goals, timeline, and any specific requirements.
<!-- Basic Help Text -->
<div class="mb-3">
<label for="helpText" class="form-label">Username</label>
<input type="text" class="form-control" id="helpText" />
<div class="form-text">
Choose a unique username that others will recognize.
</div>
</div>
<!-- Small Help Text -->
<div class="mb-3">
<label for="smallHelp" class="form-label">Password</label>
<input type="password" class="form-control" id="smallHelp" />
<div class="form-text small">
Must be 8-20 characters long, contain letters and numbers.
</div>
</div>
<!-- Block-level Help Text -->
<div class="mb-3">
<label for="blockHelp" class="form-label">Description</label>
<textarea class="form-control" id="blockHelp" rows="3"></textarea>
<div class="form-text">
<strong>Note:</strong> Provide detailed information...
</div>
</div>Disabled and Readonly States
Disabled Form Control
Disabled Select
Readonly Form Control
Disabled Checkbox
<!-- Disabled Input -->
<input
type="text"
class="form-control"
id="disabledInput"
placeholder="Cannot edit"
disabled
/>
<!-- Readonly Input -->
<input
type="text"
class="form-control"
id="readonlyInput"
value="Cannot be changed"
readonly
/>
<!-- Disabled Select -->
<select class="form-select" disabled>
<option>Disabled select</option>
</select>
<!-- Disabled Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledCheck" disabled />
<label class="form-check-label" for="disabledCheck">
Disabled checkbox
</label>
</div>Form Sizing
Input Sizing
Select Sizing
<!-- Input Sizing -->
<input type="text" class="form-control form-control-sm" placeholder="Small">
<input type="text" class="form-control" placeholder="Default">
<input type="text" class="form-control form-control-lg" placeholder="Large">
<!-- Select Sizing -->
<select class="form-select form-select-sm">
<option>Small select</option>
</select>
<select class="form-select">
<option>Default select</option>
</select>
<select class="form-select form-select-lg">
<option>Large select</option>
</select>Form Fieldset and Legend
Grouping Related Form Controls
<!-- Form Fieldset Example -->
<fieldset class="border p-3 rounded">
<legend class="float-none w-auto px-2">Personal Information</legend>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</fieldset>Best Practices
Form Design Best Practices
- Use proper labels: Always associate labels with form controls using
forandidattributes - Group related fields: Use fieldsets to organize related form controls
- Provide clear help text: Use
.form-textfor additional guidance - Indicate required fields: Use asterisks or other visual indicators
- Maintain consistent sizing: Use appropriate size classes for your design
- Consider accessibility: Use
.visually-hiddenfor screen reader-only labels when needed
Common Mistakes to Avoid
- ❌ Missing
forattributes on labels - ❌ Not using
.form-controlclass on inputs - ❌ Forgetting to wrap checkboxes/radios in
.form-check - ❌ Using too many field sizes on one form
- ❌ Not providing clear error states for validation
