Form elements

  1. Form
  2. Elements

General

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.

Help text that breaks onto a new line and may extend beyond one line.
*Require selectize plugin to be include.

email@example.com

Browse

Default font-size on input-lg is 13px

Form State

Validation states

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.

Help text that breaks onto a new line and may extend beyond one line.
Help text that breaks onto a new line and may extend beyond one line.
Help text that breaks onto a new line and may extend beyond one line.

Form Sizing

Height sizing

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

Column sizing

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

Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input.

@
.00
$ .00

Selectize

Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

Input Masking

Datepicker

Timepicker

Select2

Bootstrap Touchspin