Input Fields

Individual form controls automatically receive some global styling. All textual elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

A block of help text that breaks onto a new line and may extend beyond one line.
Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

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

$ .00

Enhanced Select Boxes

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

The Basics

Select2 can take a regular select box like this

Multi-Value Select Boxes

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

Hiding Search Box

You can hide search box when you have only few items in select boxes.


Various display options of the Select2 component can be changed

To know more about examples and features visit:

Checkboxes and Radios

Below are native radios and checkboxes along with enhanced checkboxes and radios made with css.

Toggle Switches

Time Picker

Easily select a time for a text input using your mouse or keyboards arrow keys.

Date Picker

The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. Click elsewhere on the page or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

Input Masks

Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc).

Color Picker

A simple component to select color in the same way you select color in Adobe Photoshop.

Flat Mode

Dropzone Multi-File Upload

DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.

This is just a demo. Uploaded files are not stored. This does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.