What does Bootstrap give you for an existing form?
Attach Bootstrap’s documented styles to the inputs and button you already have. You can use its compiled CSS without setting up a CSS build for a simple page.
For example, form-control styles a text input and btn with btn-primary styles the main action. Keep the visible label attached to its input. If your app already imports Bootstrap, use that copy and its version.
Ordinary form styling needs the stylesheet. A Bootstrap dropdown or modal also needs the relevant JavaScript. Match that script to the stylesheet and check which components require Popper.
How should you show what a customer needs to fix?
Keep a visible error near the field. Bootstrap’s documentation warns that its custom client-side validation styles and tooltips are not exposed to assistive technologies.
- Keep a label and the browser’s starting behaviorIn an isolated copy of the form, give each field a visible, connected label. Try the browser’s own required-field message before adding a custom one.
- Check the message after a rejected test requestIf the app checks a request on the server, make its response explain what to change. Link the visible message to the relevant input. Use made-up data and verify the app is connected only to test systems before submitting.
- Repeat with the keyboard and theme you shipCheck that Tab highlights each field and button. Try the error in every color mode the form uses. A border color alone cannot explain what went wrong.
Where should you change a Bootstrap form’s colors?
Use the documented color settings for the part of Bootstrap you want to change. Start in one form when you only need a local adjustment.
Bootstrap 5.3 supports color modes through CSS variables. More extensive changes can use its Sass source and build. After a shared change, check the form and another screen, especially focus and error contrast. Bootstrap v5 does not support Internet Explorer.
Keep the imported CSS, any matching scripts, the version and your own changes. If your project builds its Bootstrap styles from source, keep those inputs too.
Which parts of Bootstrap have their own licenses?
Bootstrap’s framework code uses the MIT license. Its documentation and an optional theme, font or image can have different terms.
Use the framework’s own files and keep their license notices. If a template supplied your form, check that template’s terms before moving it into another project or redistributing it.