Default Elements

Default form elements wrapped in .row-form. You can use it for grid view forms.

Default Checkbox and Radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default Inline Checkboxes

Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.

Custom Select Plugin

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Custom TagsInput Plugin

Add .tagsinput to input text element to get tags input.

Custom Checkbox & Radio

Add .icheck to input checkbox or radio to get custom design.

Custom Color

Use .icheck-red, .icheck-blue, .icheck-orange, .icheck-yellow, .icheck-pink, .icheck-purple, .icheck-green, .icheck-aero, .icheck-grey to change input color.

Daterangepicker Default

This date range picker component for Bootstrap creates a dropdown menu from which a user can select a range of dates.

Daterangepicker Pre-defined Ranges

Use options to define ranges

File Input

Use this markup to change default input field

Datepicker Default

Add .datepicker to input text element to use datepicker.

Datepicker Multiple Months

Add .mdatepicker to use datepicker with multiple months.

Timepicker Default

Add .timepicker to input text element to use timepicker.

Datetimepicker With Datepicker

Add .datetimepicker to use date and time picker.

Chained Selects Class Based

Child selects are chained to parent select. Child select options must have class names which match option values of parent select.

Chained Selects Many Selects

Let’s add a third select.

Default Vertical Form

Default form elements wrapped in .form-group.

Form Sizing

Create larger or smaller form controls that match button sizes. Use .input-lg,.input-sm to control height, and set widths using grid column classes like .col-md-*

Form States Disabled

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

Form States Focus

Add the .focusedInput class to get focused input element.

Form States Validation

Add .has-warning, .has-error, or .has-success to the parent element.

Form States Optional icons

Add .has-feedback to .form-group, and add .form-control-feedback to icon element.

Optional icons also work on horizontal and inline forms.

Input Groups Basic

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 .form-control.

Input Groups Button

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.

Switch Checkbox

Turn checkbox form input to switch button.

Checkbox switch state disabled

Switch Radio

Turn checkbox form input to switch button.

Radio switch state disabled

Spinner Default

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling. Add .spinner to get default spinner with +/- 1 step.

Spinner with step 0.1

Spinner with custom settings