Forms

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

  • Email address
  • Password
  • File input

Example block-level help text here.

  • Check me out

  • Submit

Inline form

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

  • Email address

  • Password

  • Remember me

  • Sign in

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

  • Email

  • Password

  • Remember me

  • Sign in

Supported controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

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)

  • Option one is this and that—be sure to include why it's great
  • Option one is this and that—be sure to include why it's great
  • Option two can be something else and selecting it will deselect option one

Inline checkboxes

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

  1. 1
  2. 2
  3. 3

Selects

Use the default option, or add multiple to show multiple options at once.

  • 1
  • 2
  • 3
  • 4
  • 5

Static control

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

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Demo :focus state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Validation states

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

  • Input with success
  • Input with warning
  • Input with error

Control sizing

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

Height sizing

Create taller or shorter form controls that match button sizes. Border radius can be changed using .border-radius class.

  • .input-lg
  • Default select .input-sm

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Help text

Block level help text for form controls.

A block of help text that breaks onto a new line and may extend beyond one line.