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.

<!-- Checkboxes -->
<div class="form-check form-check-inline">

<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1">
<label class="form-check-label">1</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2">
<label class="form-check-label">2</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3">
<label class="form-check-label">3</label>
</div>

<!-- Radio Buttons -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1">
<label class="form-check-label">1</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2">
<label class="form-check-label">2</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
<label class="form-check-label">3</label>
</div>

</div>

There's a lot more to Bootstrap forms than I can outline here. See the Bootstrap 5 documentation for a more comprehensive breakdown.