Form Elements
We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the Bootstrap grid means you can do almost anything.Basic example
Individual form controls automatically receive some global styling.
Default Form
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.
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. Doing so changes .form-groups to behave as grid rows, so no need for .row.
Inline form
Add .form-inline to your <form> for left-aligned and inline-block controls.
Alternative example
Show your text field as a line, adding the class .underline
Default Form
Horizontal Form
Control sizing
Create taller or shorter form controls that match button sizes.
Default field sizing
Alternative field sizing
Defining a Fieldset
<fieldset> is used as a wrapper right inside the form element. Right after you define a fieldset, you can include a legend title by using <legend>. Here's some HTML to help make copy paste.
Input Options
Add the disabled boolean attribute on an input to prevent user input.
Add the readonly boolean attribute on an input to prevent user input.
An asterisk indicates to the user that the field is required.
Includes validation styles for success states on form controls.
Includes validation styles for warning states on form controls.
Includes validation styles for error states on form controls.
Icons & Helpers
Checkboxes
Checkboxes are for selecting one or several options in a list
Inline Checkbox
Use the .checkbox-inline classes on a series of checkboxes for controls that appear on the same line.
Default (stacked)
Various Colours
Various Sizes
Switches
Turn checkboxes in toggle switches.
Buttons
Turn checkboxes in buttons.
Radio
Radios are for selecting one option from many.
Inline radio
Use the .radio-inline classes on a series of radios for controls that appear on the same line.
Vertical radio
Verious Colours
Sized
Buttons
Turn radio in buttons.
Masked Input
Masked Input allows users to enter the data in a certain format (dates, phone numbers, etc).
Text Area
The <textarea> tag defines a multi-line text input control.
Date/Time Picker
A clean, flexible, and fully customizable date picker. User can navigate through months and years. The datepicker shows dates that come from other than the main month being displayed. These other dates are also selectable.
Inline
Input
component
Format:
Timepicker
Date Range
Select Box
The <select> element is used to create a drop-down list.
Default Select Boxes
Css3 Select Boxes
Select2
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Input Spinner
A mobile and touch friendly input spinner component for Bootstrap. It supports the mousewheel and the up/down keys.
The init value is set on the input with the value attribute.
Use the data-postfix attribute to add a postfix.
Use the data-prefix attribute to add a prefix.
Set the data-verticalbuttons attribute as true.
You can also specify the class for icons.
Set the data-postfix attribute as button.
You can also specify the class for the button.
Size of the whole controller can be set with applying input-sm or input-lg class on the input
