Form Elements

  • Home
  • Forms
  • 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

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-group s 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.

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

Date - 99/99/9999
Phone - (999) 999-9999
Product Key -A*-999-A999
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.

Input Spinner

A mobile and touch friendly input spinner component for Bootstrap. It supports the mousewheel and the up/down keys.

Basic example

The init value is set on the input with the value attribute.

Example with postfix

Use the data-postfix attribute to add a postfix.

With prefix

Use the data-prefix attribute to add a prefix.

Vertical buttons

Set the data-verticalbuttons attribute as true . You can also specify the class for icons.

Button postfix

Set the data-postfix attribute as button . You can also specify the class for the button.

Sizes

Size of the whole controller can be set with applying input-sm or input-lg class on the input