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.
Orient yourself in Properties panel
Section titled “Orient yourself in Properties panel”Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Form: ID and see how it fits into this area.
Form: ID
Section titled “Form: ID”Use the ID input for stable JS hooks and testing. This step matters because Form: ID is part of Selection Panels Properties Formid, and understanding that context makes the next action easier to repeat in your own project.
Form: Method
Section titled “Form: Method”Review Method when you’re doing a classic HTML submit. This step matters because Form: Method is part of Selection Panels Properties Scmethod, and understanding that context makes the next action easier to repeat in your own project.
Form: Action
Section titled “Form: Action”Review Action when you’re submitting to a server endpoint. This step matters because Form: Action is part of Selection Panels Properties Formaction, and understanding that context makes the next action easier to repeat in your own project.
Form: Layout
Section titled “Form: Layout”Use Layout to switch between vertical, horizontal, and floating labels. This step matters because Form: Layout is part of Selection Panels Properties Formgrouplayout, and understanding that context makes the next action easier to repeat in your own project.
Form: Inline
Section titled “Form: Inline”Toggle Inline when you want the form controls to sit on one line. This step matters because Form: Inline is part of Selection Panels Properties Forminline, and understanding that context makes the next action easier to repeat in your own project.
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. This step matters because Input: ID is part of Selection Panels Properties Theid, and understanding that context makes the next action easier to repeat in your own project.
Input: Name
Section titled “Input: Name”Use Name for form posting and integrations. This step matters because Input: Name is part of Selection Panels Properties Inputname, and understanding that context makes the next action easier to repeat in your own project.
Input: Type
Section titled “Input: Type”In Properties, set Type (email/password/number/etc). This step matters because Input: Type is part of Selection Panels Properties Inputtype, and understanding that context makes the next action easier to repeat in your own project.
Input: Placeholder
Section titled “Input: Placeholder”Use Placeholder for hint text. This step matters because Input: Placeholder is part of Selection Panels Properties Inputplaceholder, and understanding that context makes the next action easier to repeat in your own project.
Input: Static Value
Section titled “Input: Static Value”Use Static Value for a default value (when appropriate). This step matters because Input: Static Value is part of Selection Panels Properties Inputvalue, and understanding that context makes the next action easier to repeat in your own project.
Input: Disabled
Section titled “Input: Disabled”Toggle Disabled when the user shouldn’t be able to edit the field. This step matters because Input: Disabled is part of Selection Panels Properties Inputdisabled, and understanding that context makes the next action easier to repeat in your own project.
Input: Read Only
Section titled “Input: Read Only”Toggle Read Only when the user can copy but not change the value. This step matters because Input: Read Only is part of Selection Panels Properties Inputreadonly, and understanding that context makes the next action easier to repeat in your own project.
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. This step matters because Multiple is part of Selection Panels Properties Selectmultiple, and understanding that context makes the next action easier to repeat in your own project.
Disabled
Section titled “Disabled”Toggle Disabled to prevent changes. This step matters because Disabled is part of Selection Panels Properties Selectdisabled, and understanding that context makes the next action easier to repeat in your own project.
Use Size for a larger/smaller select control. This step matters because Size is part of Selection Panels Properties Selectsize, and understanding that context makes the next action easier to repeat in your own project.
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. This step matters because Checkbox: Name is part of Selection Panels Properties Checkboxname, and understanding that context makes the next action easier to repeat in your own project.
Checkbox: Static Value
Section titled “Checkbox: Static Value”Use Static Value when you need a specific value on submit. This step matters because Checkbox: Static Value is part of Selection Panels Properties Checkboxvalue, and understanding that context makes the next action easier to repeat in your own project.
Checkbox: Disabled
Section titled “Checkbox: Disabled”Toggle Disabled to prevent changes. This step matters because Checkbox: Disabled is part of Selection Panels Properties Checkboxdisabled, and understanding that context makes the next action easier to repeat in your own project.
Checkbox: Position Static
Section titled “Checkbox: Position Static”Toggle Position Static when you need the checkbox aligned without absolute positioning. This step matters because Checkbox: Position Static is part of Selection Panels Properties Checkboxposstatic, and understanding that context makes the next action easier to repeat in your own project.
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.