Overview

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

We'll never share your email with anyone else.

Form controls

Textual form controls—like input, select, and textarea are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

For file inputs, swap the .form-control for .form-control-file.


Sizing

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


Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.


Readonly plain text

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

Form Inline with form control plain text


Range Input

Set horizontally scrollable range inputs using .form-control-range.


Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Default (stacked)

Inline

Without labels

Form groups

The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.


Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.


Form row

More complex layouts can also be created with the grid system.


Horizontal form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your label s as well so they’re vertically centered with their associated form controls.

Radios
Checkbox

Horizontal form label sizing

Be sure to use .col-form-label-sm or .col-form-label-lg to your label s or legend s to correctly follow the size of .form-control-lg and .form-control-sm.


Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.


Auto-sizing

@

Help text

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Form Inline
Must be 8-20 characters long.

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Theme Selector
Multi Language