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-control-* for optimum spacing.

Example block-level help text here.

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.

Inline form

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states.

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 .form-control-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.