UI Elements
Form controls
Basic elements

Basic form elements

Examples of various form controls.
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.

Example block-level help text here.

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 (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

Inline form

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Select options

Select2 is a jQuery based replacement for select boxes. It can take a regular select box and turn it into:

A placeholder value can be defined and will be displayed until a selection is made.

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

File inputs

Standard file input

File input as a button with filename inside

File input with filename outside button

Native supported controls

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.


Control sizing

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

Disabled state

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