Forms elements to build your form

Input fields IN WELL This is an inline comment.

Note: Boo Admin Template version 1.0

Input fields DEFAULT This is an inline comment.

Note: Boo Admin Template version 1.0

Buttons instead of text
Prepended and appended inputs
  $     .00  
Selectpicker PLUGIN Style

For simple selects on forms

Select2 PLUGIN Style Write or select a tag and press "enter" or "comma" to add them.
Multiselect PLUGIN element

Instead of a select a bootstrap button and options as checkboxes

Normal select. The plugin will add the multiple="multiple" attribute automatically. The first option is selected automatically by the browser when ommitting the multiple="multiple" attribute.
Select with preselected options: <option value="cheese" selected>Mozzarella</option>
As link using button: 'btn btn-link'.
Small button using button: 'btn btn-small'.
Disabled using button: 'btn btn-primary disabled'.
Multiple select within a group with add-ons and default container for the plugin: container: '<div class="btn-group" />'.
Multiple selects within a group using container: '<span class="dropdown" />'.
Combobox PLUGIN element

combines input and dropdown


Use the default option or specify a multiple="multiple" to show multiple options at once. Plugin style .selecttwo or .selectpicker

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven
Radio CLASS radio

Radio button
Checkbox CLASS checkbox

Use class-toggle="btn-yellow" set the color of choice.

Checkbox TOGGLE Button

Checkbox TOGGLE Button

Status is: true

Attached to a field with the format specified via options.

Attached to a field with the format specified via data tag.

<div id="datePickerVia" data-date="09/19/12" data-date-format="mm/dd/yy"></div>

As component.

Attached to other elment then field and using events to work with the date values.

Start date Change End date Change
2012-02-20 2012-02-25

Attached to div (inline)


US date/hour format.

Disables date picker.

Disables time picker.

The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.

Pre-defined Ranges & Custom callback handler

Select report date
  • Custom callback handler called when the date range selection is made
  • Setting initial start and end dates for the calendars
  • Bounding the minimum and maximum selectable dates
  • Overriding all labels in the interface with localized text
  • Starting the calendar week on any day of week
  • Overriding the direction the dropdown expands (left/right of element it's attached to)
  • Setting the date format string for parsing string inputs

Attached to a field with hex format specified via options.

Attachet to a field with the rgba format specified via data tag.

As component.

Using events to work with the color.

Sizing elements
  • or next: .input-xlarge .input-xxlarge

  • Make any <input> or <textarea> element behave like a block level element.

  • or next: .span8 .... .span12

  • Block level inputs: .input-block-level.

Control states
Something may have gone wrong
Please correct the error
Please correct the error
This is uneditable
Multiple inputs per line GRID SIZING

Style form dark form elements

Add next class .form-dark for color elements.

Combine .well in.well for color background. Boo offers a large number of classes for combinable appearance. More in demo

Form Layouts Search, Inline, Horizontal

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

Horizontal form

  • Add .form-horizontal to the form
  • Wrap labels and controls in .control-group
  • Add .control-label to the label
  • Wrap any associated controls in .controls for proper alignment
Input fields
  • In addition to freeform text.
  • This is an inline comment.

    Note: Boo Admin Template version 1.0

Input fields
Input fields
Fields with masked values
  • 99/99/9999

  • (999) 999-9999

  • (999) 999-9999? x99999

  • +43 999 999 999

  • 99/99/9998

  • 999-99-9999

  • a*-999-a999-a999

  • ~9.99 ~9.99 999

  • aaa-999-*****-9999

  • 99%

  • FP009-99999-2012

  • a - Represents (A-Z,a-z), 9 - Represents (0-9), * - Represents (A-Z,a-z,0-9)