Inputs

Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Form text

Block-level or inline-level form text can be created using .form-text.

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. readonly inputs can still be focused and selected, while disabled inputs cannot.

Readonly plain text

If you want to have <input readonly /> elements in your form styled as plain text, replace .form-control with .form-control-plaintext to remove the default form field styling and preserve the correct margin and padding.

Textarea

Textarea helps the user to input multi-line textual values.

Disabled

Add the disabled boolean attribute on a <textarea> to give it a grayed out appearance and remove pointer events.

Select

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

Disabled

Add the disabled boolean attribute on a <select> to give it a grayed out appearance and remove pointer events.

Checkboxes and Radios

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

Reverse

Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.

Without labels

Omit the wrapping .form-check for checkboxes and radios that have no label text.

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role.

Toggle buttons

Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements. xx

Checkbox toggle buttons

Radio toggle buttons