Forms elements to build your form

Inputs elements

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

Prepended and Appended elements

Buttons instead of text
Prepended and appended inputs
@
.00
  $     .00  

Selects elements

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

Select DEFAULT

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

Bootstrap Spinner convenient numeric input

Bootstrap Pillbox easily manage selected items

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
  • Item Seven

Bootstrap Search integrated search interaction

Click (after entering text) to see your search text.

Checkbox and Radio elements

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

Datepicker Plugins for Bootstrap

Attached to a field with the format specified via options.

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

manual set to 10/10/12 
<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)

09-09-2012
manual set to 01-09-1969

DateTimePicker Plugins for Bootstrap

Default behavior in pt-BR, picks date/time with fast masked input typing (need only to type the numbers, the static part of the mask is inserted automatically if missing) or via the popup widget, which supports year, month, day, hour and minute views

Default

US date/hour format.

Disables date picker.

Disables time picker.

DateRangePicker select date range

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

ColorPicker select color

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 and Control states style

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
Woohoo!
This is uneditable

Grid and Layout form settings

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

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

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

Sizing and Control states style

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)