Bootstrap 5 Forms
Creating beautiful and functional forms with Bootstrap
📝 What are Bootstrap Forms?
Bootstrap Forms provide pre-styled form controls and layouts for collecting user input. With simple classes, you can create professional-looking forms with consistent styling, validation states, and responsive behavior across all devices.
<!-- Basic form example -->
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Output:
Form Components
Text Inputs
Standard text input fields
<input type="text" class="form-control">Textarea
Multi-line text input
<textarea class="form-control"></textarea>Labels
Descriptive form labels
<label class="form-label">Name</label>Validation
Form validation states
<input class="form-control is-valid">🔹 Basic Form Controls
Basic form controls in Bootstrap, styled with `form-control`, provide consistent, accessible inputs for text, email, password, and textarea fields. These controls feature uniform padding, border styling, and focused states across browsers. Pairing them with `form-label` ensures proper labeling for screen readers and visual clarity. This standardization simplifies form development, improves usability, and ensures accessibility compliance. Basic form controls are foundational to creating reliable, professional forms for everything from simple contact pages to complex multi-step application processes.
<form>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter password">
</div>
<div class="mb-3">
<label for="bio" class="form-label">Bio</label>
<textarea class="form-control" id="bio" rows="3" placeholder="Tell us about yourself"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Output:
🔹 Form Sizing
Form sizing classes like `form-control-lg` and `form-control-sm` allow precise control over input dimensions, enhancing visual hierarchy and touch accessibility. Larger inputs improve tap targets on mobile devices, while smaller ones save space in dense interfaces like toolbars or tables. Consistent sizing across related elements creates balanced, professional forms that guide user attention effectively. This flexibility supports diverse design needs, from prominent call-to-action inputs to compact search bars, ensuring optimal usability across all interaction contexts and screen sizes.
<!-- Large input -->
<input type="text" class="form-control form-control-lg" placeholder="Large input">
<!-- Default input -->
<input type="text" class="form-control" placeholder="Default input">
<!-- Small input -->
<input type="text" class="form-control form-control-sm" placeholder="Small input">Output:
🔹 Disabled and Readonly
The `disabled` attribute prevents all interaction with a form control, graying it out and excluding its value from submission, while `readonly` allows selection but not editing. Disabled fields are ideal for conditional logic or unavailable options, whereas readonly fields display immutable data like order numbers or timestamps. Understanding this distinction is crucial for form behavior, data integrity, and user experience. Proper use ensures users can view necessary information without accidentally altering critical data, enhancing form reliability and interface clarity.
<!-- Disabled input -->
<input type="text" class="form-control" placeholder="Disabled input" disabled>
<!-- Readonly input -->
<input type="text" class="form-control" value="Readonly value" readonly>Output:
🔹 Form Validation States
Form validation states provide immediate visual feedback using `is-valid` and `is-invalid` classes, paired with corresponding feedback messages for user guidance. This real-time validation helps users correct errors before submission, reducing frustration and improving data accuracy. Valid inputs typically show green borders and checkmarks, while invalid ones display red borders and error texts. Implementing these states enhances form usability, supports accessibility, and creates a more interactive, trustworthy data entry experience across all devices and user scenarios.
<form>
<div class="mb-3">
<label for="validInput" class="form-label">Valid Input</label>
<input type="text" class="form-control is-valid" id="validInput" value="Correct!">
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="mb-3">
<label for="invalidInput" class="form-label">Invalid Input</label>
<input type="text" class="form-control is-invalid" id="invalidInput">
<div class="invalid-feedback">
Please provide a valid input.
</div>
</div>
</form>Output:
🔹 Floating Labels
Floating labels animate inside input fields, moving upward when focused or filled, creating a modern, space-efficient form design that maintains accessibility. Using the `form-floating` wrapper with `form-control` and `form-label` ensures proper structure and functionality. This pattern reduces visual clutter, improves form aesthetics, and keeps labels persistently visible. It is widely adopted in contemporary web design for login screens, registration forms, and any interface requiring a clean, intuitive data entry process that enhances user engagement and satisfaction.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<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>Output:
🔹 Input Groups
Input groups extend form controls by prepending or appending text, buttons, or icons using the `input-group` container and `input-group-text` for static elements. This design pattern adds contextual information like currency symbols, units, or actions directly adjacent to inputs, improving clarity and functionality. Commonly used for search bars, price fields, or enhanced file uploads, input groups create more intuitive, self-explanatory form fields. They enhance user experience by reducing ambiguity and integrating related actions seamlessly within the form layout.
<!-- Input with prepended text -->
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<!-- Input with appended button -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search...">
<button class="btn btn-primary" type="button">Search</button>
</div>
<!-- Input with both prepend and append -->
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-text">.00</span>
</div>