Forms elements View all kinds of Forms elements examples below.

Forms elements

Use the examples below to build your forms.

Basic

All form elements like, inputs, selects, textareas should have the .form-control CSS class. Each form row should have the .form-group CSS class.

Inline

To create an inline form add the .form-inline CSS class to the <form> element.

Horizontal form

To create a horizontal form add the .form-horizontal CSS class to the <form> element.

Checkbox

Use the markups below to create form layouts with checkboxes.

Vertical layout

Use the markup below to vertically align checkbox inputs.

Horizontal layout

Use the .checkbox-inline classes on a series of checkboxes or checkboxes for controls that appear on the same line.

Custom checkbox

Add the .custom-checkbox CSS class to the checkbox input that you would like to have custom styling.

Background colors

You can use the color helper CSS classes to add different backgrounds to the custom checkbox inputs.

Theme inherited

The .checkbox-primary color can be inherited from a theme color scheme you select. These colors are usually used through out the app to style different kinds of widgets, components and elements.

Result	Helper class	Description
Primary checkbox	.checkbox-primary	This is the primary background color.

Framework inherited

The color helper classes below come packed with the framework.

Result	Helper class	Description
Success checkbox	.checkbox-success	Used for success actions.
Danger checkbox	.checkbox-danger	Used for error actions.
Warning checkbox	.checkbox-warning	Used for warning actions.
Info checkbox	.checkbox-info	Used for information actions.

Radio

Use the markups below to create form layouts with radios.

Vertical layout

Use the markup below to vertically align radio inputs.

Horizontal layout

Use the .radio-inline classes on a series of radios or radios for controls that appear on the same line.

Custom radio

Add the .custom-input CSS class to the radio input that you would like to have custom styling.

Background colors

You can use the color helper CSS classes to add different backgrounds to the custom radio inputs.

Theme inherited

The .radio-primary color can be inherited from a theme color scheme you select. These colors are usually used through out the app to style different kinds of widgets, components and elements.

Result	Helper class	Description
Primary radio	.radio-primary	This is the primary background color.

Framework inherited

The color helper classes below come packed with the Bratilius Framework.

Result	Helper class	Description
Success radio	.radio-success	Used for success actions.
Danger radio	.radio-danger	Used for error actions.
Warning radio	.radio-warning	Used for warning actions.
Info radio	.radio-info	Used for information actions.

Select

Use the markups below to create select inputs.

Basic

To disable a select input, add the disabled parameter to it.

Input switches

Use the markups below to create input switches.

Basic

Add the .input-switch CSS class to any checkbox or radio to create custom input switches.

Background colors

You can use the color helper CSS classes to add different backgrounds to the custom input switches. You can change the color using the data-on-color parameter for the "On" state and data-off-color parameter for the "Off" state. Accepted values are primary, info, success, warning, danger, default

Sizing

You can change the size of the input switches using the data-size parameter. Accepted values are mini, small, normal, large.

Custom selects

Use the markups below to create select inputs with custom styling.

Basic

Add the .custom-select CSS class to the radio input that you would like to have custom styling.

Chosen select

To create custom select inputs with searchable results you need to add the .chosen-select CSS class to the select input. Use the data-placeholder="Title here..." to add a title to the custom select. To make a Chosen select disabled, add the disabled parameter to it.

Multiselect

To create multiselect inputs, you need to add the multiple parameter to a select input.

Basic

To apply custom styling to multiple select inputs, add the .form-controlCSS class.

Chosen multiselect

To create custom multiselect inputs with searchable results you need to add the .chosen-select CSS class to the select input and the multiple parameter.

Multiselect list

To transform a basic multiple select input into a multiselect list, you need to add the .multi-select CSS class to it.

Textarea

To apply styling to any textarea, you need to add to it the .form-control CSS class.

Basic

Below you will find a basic textarea example. Disable textarea by adding either the .disabled CSS helper class or the disabled parameter.

Sizing

Textarea can have one of the following heights: .textarea-xs, .textarea-sm, .textarea-md, .textarea-lg.

No resize

Add the .textarea-no-resize CSS class to textareas to remove the possibility of resize.

Autoresize

Add the .textarea-autosize CSS class to textareas to auto-resize textareas as you type more text into them.

Character count

Add the .textarea-counter CSS class to textareas to add a remaining characters counter.

Input

Use the markups below to create text inputs.

Basic

To apply styling to input fields, you need to add to it the .form-control CSS class. Add the disabled parameter to a text input to disable it.

Autocomplete

To create autocomplete inputs you need to add the .autocomplete-input CSS class to an input field.

Spinner

To create a spinner input you need to add the .spinner-input CSS class to an input field.

Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

Basic

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

Checkboxes & radios addons

Place any checkbox or radio option within an input group's addon instead of text.

Buttons addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

Icons addons

Wrap <i class="glyph-icon icon-cog"></i> elements inside .input-group-addon to create outer icon addons.

Inside icons addons

Wrap <i class="glyph-icon icon-cog"></i> elements inside .input-group-addon to create inner icon addons.