Delay errors until it matters
Show invalid states after interaction (blur/change) or on submit — not immediately on first load.
Bootstrap Forms
Build Bootstrap-styled forms with layout helpers and validation feedback, and learn patterns for a smooth form UX.
Introduction
Section titled “Introduction”In this tour we’ll review a few common Bootstrap form controls and the properties you’ll use most often.
Form Container
Section titled “Form Container”Start with the form as a whole instead of jumping straight to individual inputs. This example shows how Bootstrap organizes fields, spacing, and validation-friendly structure, which gives you the context you need before looking at the smaller controls that make the form readable and usable.
tip: Put spacing/layout on the parent container when possible, rather than repeating spacing on every input.
Form: ID
Section titled “Form: ID”Use the ID input for stable JS hooks and testing.
Form: Method
Section titled “Form: Method”Review Method when you’re doing a classic HTML submit.
Form: Action
Section titled “Form: Action”Review Action when you’re submitting to a server endpoint.
Form: Layout
Section titled “Form: Layout”Use Layout to switch between vertical, horizontal, and floating labels.
Form: Inline
Section titled “Form: Inline”Toggle Inline when you want the form controls to sit on one line.
Email Input
Section titled “Email Input”Inputs are primarily configured via attributes (type, placeholder) plus validation settings.
tip: When styling inputs, select the input itself; when adjusting spacing, select the surrounding group/container.
Input: ID
Section titled “Input: ID”Use ID for stable selection and hooks.
Input: Name
Section titled “Input: Name”Use Name for form posting and integrations.
Input: Type
Section titled “Input: Type”In Properties, set Type (email/password/number/etc).
Input: Placeholder
Section titled “Input: Placeholder”Use Placeholder for hint text.
Input: Static Value
Section titled “Input: Static Value”Use Static Value for a default value (when appropriate).
Input: Disabled
Section titled “Input: Disabled”Toggle Disabled when the user shouldn’t be able to edit the field.
Input: Read Only
Section titled “Input: Read Only”Toggle Read Only when the user can copy but not change the value.
Dropdown control
Section titled “Dropdown control”Dropdown (select) controls are great for compact choices. Next, review options like Multiple and Disabled.
tip: Keep option labels clear, and keep option values stable for integrations and testing.
Multiple
Section titled “Multiple”Toggle Multiple when the user should be able to select more than one option.
Disabled
Section titled “Disabled”Toggle Disabled to prevent changes.
Use Size for a larger/smaller select control.
Checkbox
Section titled “Checkbox”Checkboxes are best for yes/no and independent toggles. Next, review checkbox-specific properties.
Checkbox: Name
Section titled “Checkbox: Name”Use Name for form posting and integrations.
Checkbox: Static Value
Section titled “Checkbox: Static Value”Use Static Value when you need a specific value on submit.
Checkbox: Disabled
Section titled “Checkbox: Disabled”Toggle Disabled to prevent changes.
Checkbox: Position Static
Section titled “Checkbox: Position Static”Toggle Position Static when you need the checkbox aligned without absolute positioning.
Conclusion
Section titled “Conclusion”Bootstrap forms are mostly attributes (type/placeholder) plus a few key classes (form-control, form-select, is-valid/is-invalid).
Validation reminder
Section titled “Validation reminder”Bootstrap provides the visual states, but you decide when to show them:
- after user interaction
- on submit
- after server response
Avoid showing errors immediately on first load.
Trigger from real outcomes
Use client checks and/or server responses to decide when to display is-valid / is-invalid.
Next steps
Section titled “Next steps”Continue with a related tour or go back to the Bootstrap tours index.
Keep building
Jump to a related Bootstrap tour to practice forms in context.
Back to the index
Use the menu to return to the Bootstrap tours hub.