Bootstrap 5 Forms
Create responsive and consistently styled forms using Bootstrap 5 form classes
Bootstrap 5 provides a default style that is applied across most form controls. It also provides classes for specific purposes.
Basic Form
Here's an example of a basic form in Bootstrap 5. You can use Bootstrap's .form-control class against textual <input>, <textarea>, and <select> elements to apply width: 100% by default.
Inline Form
Use Bootstrap's .row-cols-* classes to create responsive horizontal layouts. Using .col-12 helps stack the form controls on narrow viewports.
If the above form is not displaying inline, open the preview in a new window. If it still isn't displaying inline, you might need to view the example on a bigger screen.
Help Text
Bootstrap 5 provides the .form-text class that can be used to indicate help text. You can combine this class with utility classes such as .text-muted.
You should also use the .aria-describedby attribute to associate the help text with the form control. This will ensure that screen readers can announce the help text when the user focuses on the form control.
Static Control
You can use Bootstrap's .form-control-plaintext on a <p> element to present plain text next to a label (eg. instead of using an input field).
Checkboxes & Radio Buttons
Bootstrap 5 provides classes such as .form-check, .form-check-label, .form-check-input, and .form-check-inline for displaying checkboxes and radio buttons.
To display the checkboxes or radio buttons stacked, nest each one inside a <div> with the .form-check class.
Also, add the .form-check-label to the <label> tag, and .form-check-input to the <input> tag.
Inline
With Bootstrap 5, checkboxes and radio buttons are stacked by default (they appear above one another). You can display them inline by adding .form-check-inline to the surrounding <div>. Keep the .form-check-input on the <input> tag.
There's a lot more to Bootstrap forms than I can outline here. See the Bootstrap 5 documentation for a more comprehensive breakdown.