A quick look at some of the major changes coming to form controls in Bootstrap 5.
Taking a fresh pass at custom checkboxes and radios without psuedo-elements, thus replacing our previous native form control styles. By resetting the
appearance, we should be able to style the inputs across Edge, Chrome, Firefox, and Safari.
Differences from v4:
ems instead of
rems for easy sizing.
<input>s are aligned with
margin-topto help align and scale with sizing options.
.custom-checkbox-inlinemodifier class—instead, use utilities for way more flexibility in your layouts.
These new checks and their text are aligned the same way as v4—with
padding-left on the outer container. This is so any and all siblings to the
<input> (like the
<label>, help text, or validation feedback) is easily aligned.
Flexbox styles were originally attempted, but they're unnecessary and were abandoned early in favor of a
And without labels inside the wrapper:
Make any checkbox, radio, or switch appear "inline" with utility classes. We recommend
margin utilities (e.g.,
.mr-3) as needed.
em units, custom checks, radios, and switches will scale to their own
font-size, or their containing element's (explicit or inherited)
font-size. Here we're using a modifier class to set
font-size: 1.5rem on the container.
Note that you could scope the sizing to the
<input> itself, but you'll need additional styles to change the indentation of the
<label>'s text. Alternatively, you could set a
font-size on the wrapper and then override the
.form-select, the previous
.custom-select is going to become the default styling, providing a unified look across all platforms.
Below are the default and disabled selects. Disabled styles are the same as our checks—no
pointer-events and an
Similar to the new checks, make selects inline with a modifier class:
.w-auto. Selects are
inline-block to begin with, so no need to change their
Vertical alignment may become an issue, so consider wrapping your inline form controls in some flex and margin utilities. The example below features a wrapper with
.mb-0 on the inline checkbox.
Sizing should become similar to the new checks and switches as they're now built with
ems. Below is the same select as above, but with an increased
And making it smaller with
size should render the select as expected, though with (expected) limited styling of the