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.
  1. Forms
  2. Form Elements
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

Horizontal forms overhauled: Dropped the .form-horizontal class requirement. .form-group no longer applies styles from the .row via mixin, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">). Added new .col-form-label class to vertically center labels with .form-controls. Added new .form-row for compact form layouts with the grid classes (swap your .row for a .form-row and go).

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.

@
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.

Your Account
Choose a password
Personal Information
Terms & Condition
Input Options
Disabled State

Add the disabled boolean attribute on an input to prevent user input.

Readonly State

Add the readonly boolean attribute on an input to prevent user input.

Required Label

An asterisk indicates to the user that the field is required.

Success State

Includes validation styles for success states on form controls.

Warning State

Includes validation styles for warning states on form controls.

Error State

Includes validation styles for error states on form controls.

Icons & Helpers
A block of help text that breaks onto a new line and may extend beyond one line.
Inline help text
@
.00
$
.00
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
Switch

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).

Date - 99/99/9999
Phone - (999) 999-9999
Date & Hour 01/01/2018 10:30:15
Text Area

The <textarea> tag defines a multi-line text input control.

Default
With Character Limit
As a Block Note
Autosize with Animation
Autosize without Animation
Autosize As a Block Note
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

to
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.