Form Elements

Input Text Text Inputs with different sizes by height and column.

Basic Text Feilds with different sizes by height and column.


Floating Label - Floating animation for label when Input feild is active.




Input Status - Focused and Disabled

Textarea Form control which supports multiple lines of text. Change 'rows' attribute as necessary.

Basic Example

Height Auto Growing

Disabled State

Select Use the default option, or add multiple to show multiple options at once.

Basic Example

Disabled Stat

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

Basic Example



Inline Checkboxes and Radios - Use the '.checkbox-inline' or '.radio-inline' classes on a series of checkboxes or radios for controls that appear on the same line.



Form Components

Input Groups Extend form controls by adding text or buttons before, after, or on both sides of any text-based inputs.

Basic Example

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












Floating Labels

Basic example for input groups with floating labels



Different Sizes

You may use the extra sizing classes to change size of the feilds.




Input Mask An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc...

Custom Select A custom select for Bootstrap using it's Dropdown component

Basic Example

Serach Option

Option Groups

Disabled Options

Multi Select

Limit Selection - Set to 2

Display Count

Chosen Make long, unwieldy select boxes more user friendly.

Basic Example

Disabled Items

Multiple Example

Option Group

Toggle Switch Material Desing look alike Toggle Switches based on Radio Box.

Basic Examples

Default and Disabled options


Optional Color schemes

Use the given data attribute to change the color scheme of the Toggle Switch


Input Slider noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.

Basic Example


Range Slider


Output Value

Date Time Picker Date/time picker widget based on twitter bootstrap

Basic Example

Date Picker

Time Picker

Color Picker Simplt HEX and HSL color picker with customizable options


HTML Editor Super Simple WYSIWYG Editor on Bootstrap

Basic Example



Click to edit

You can edit content on the fly

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula erat sit amet aliquam vehicula. Aliquam aliquet et risus et consequat. Quisque ultrices nulla eu magna vulputate, quis varius massa tempor. Suspendisse sed condimentum purus, eget consequat dolor. Fusce aliquet ultricies porta. Nunc semper commodo leo at maximus. Duis maximus maximus leo, id lobortis nisi aliquam sit amet. Nullam vel ex id augue scelerisque congue sit amet eget urna.


Air-mode

Air-mode gives clearer interface with hiddened toolbar. To reveal toolbar, select a text below where you want to shape up.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod quam vel lacinia facilisis. Sed condimentum nisi vel ante maximus, sit amet vestibulum leo euismod. Curabitur viverra faucibus nisi eu molestie. Donec convallis finibus felis porttitor tristique. Nulla pretium est et ante dignissim,

Autocomplete Typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust autocompletes.

Simple File Input The file input plugin allows you to create a visually appealing file or image input widgets

Basic Example

Select file Change ×


Image Preview

Select image Change Remove


Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.

Form Examples

Basic Example Individual form controls automatically receive some global styling. 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.

Inline Form Add '.form-inline' to your 'form' for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

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-groups' to behave as grid rows, so no need for '.row'.

Multi Column Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

Form Validations

Basic Example Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

This is a successfull help block
This is a warning help block
This is an error help block

Validation Stats with Icon You can also add optional feedback icons with the addition of .has-feedback and the right icon.

© Copyright 2000 - 2017. KWEB.BIZ. All Rights Reserved. Developed by KWEB.BIZ