BUY NOW $24
Layouts
Default
Compact Sidebar
Fixed Header
Sticky Sidebar
Boxed Wrapper
Static
Skins
Material design

Basic Form Elements

Form controls

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Textual inputs

Here are examples of .form-control applied to each textual HTML5 <input> type.

Form groups

The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around a label and control pairing. As a bonus, since it’s a class you can use it with <fieldset>s, <div>s, or nearly any other element.

Inline forms

Use the .form-inline class to to display a series of labels, form controls, and buttons on a single horizontal row.

Visible labels
Hidden labels
$
.00
Grid

For more structured form layouts, you can utilize Bootstrap’s predefined grid classes or mixins. Add the .row class to form groups and use the .col-* classes to specify the width of your labels and controls.

Radios
Checkboxes and radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Default (stacked)
Inline
Static controls

When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.

email@example.com

email@example.com

Disabled states

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

Readonly inputs

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.

Control sizing

Set heights using classes like .form-control-lg, and set widths using grid column classes like .col-lg-*.

Column 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.

Must be 8-20 characters long.
Validation

Bootstrap includes validation styles for danger, warning, and success states on form controls. To use, add .has-warning, .has-danger, or .has-success to the parent element. Any .form-control-label, .form-control, and .text-help within that element will receive the validation styles.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Checkboxes
Radios
Select menu
File browser