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.
.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.
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
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.
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-inline for displaying checkboxes and radio buttons.
To display the checkboxes or radio buttons stacked, nest each one inside a
<div> with the
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
There's a lot more to Bootstrap forms than I can outline here. See the Bootstrap 5 documentation for a more comprehensive breakdown.