Form Elements Documentation

Input

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Input Types

Check input type options below that can be used :

Input Types Usage
Input text type <input type="text">
Password Input <input type="password">
Telephone Number <input type="tel">
Email field <input type="email">
URL field <input type="url">
Search Input <input type="search">
Number Input <input type="number">
Date Time <input type="datetime-local">
Date <input type="date">
Time <input type="time">
Week <input type="week">
Month <input type="month">
Color <input type="color">
Range <input type="range">

More input types example can be like :

Example Type URL
Classic Input type examples https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-inputs.html#input-types
Material Input type examples https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-inputs.html#input-types

Input Style

Use .form-group-style class with .form-group class which contains label and form field.

Find input style options below :

Input style options Class Description
Rounded Input .round Use this class for round styled input.
Square Input .square Use this class for square styled input.
Input Sizing .input-[xl/lg/sm/xs] Use this class for different input sizing.
Input with Icons .has-icon-left Default icon align is right. For left align icon use this class.
Input Background Color .bg-* Use this class for background color from THEME_COLOR.
Input Border Color .border-* Use this class for border color from THEME_COLOR.

More input style example can be like :

Example Type URL
Classic Input type examples https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-inputs.html#input-style
Material Input type examples https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-inputs.html#input-style

Input Form Validation

Check input form validation option below :

Form Validation Class Description
Danger State .has-danger Use this class for danger state
Success State .has-success Use this class for success state
Warning State .has-warning Use this class for warning state

More form validation example can be like :

Example Type URL
Classic Form validation examples https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-inputs.html#validation
Material Form validation examples https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-inputs.html#validation

Input Groups

Use .input-group class with an .input-group-addon class to prepend or append elements to a .form-control. Place one add-on or button on either side of an input. You may also place one on both sides of an input. It does not support multiple add-ons on a single side, nor multiple form-controls in a single input group.

Check input group options below that can be used :

Input Group Options Class Description
Input Group .input-group-addon To add input group addon to input. To add icon to left, add span with this class before. To add icon to right, add span using class after. You can add add-on to both the sides too.
Input Group Sizing .input-group-[lg/sm/xs] For large,small & Extra small input groups.
Input Group Buttons .input-group-btn To add input group button to input. To add button to left, add span with this class before. To add button to right, add span using this class after. You can add button to both the sides too.
Input Group add-on bg color .bg-* To color using this class to the addon.
Input Group validation .has-[danger/success/warning] For danger/success/warning input group validation.
Input Group validation with icon .form-control-[danger/success/warning] Use this class to add icon with input group validation.

Here are Input group example links below :

Example Type URL
Classic Input group https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-groups.html#input-types
Material Input group https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-groups.html#input-types
Classic Input group with checkbox & Radio https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-groups.html#input-group-checkbox
Material Input group with checkbox & Radio https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-groups.html#input-group-checkbox
Classic Input group sizing https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-groups.html#input-group-sizing
Material Input group sizing https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-groups.html#input-group-sizing
Classic Input group buttons https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-groups.html#input-group-buttons
Material Input group buttons https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-groups.html#input-group-buttons
Classic Input group dropdown https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-groups.html#input-group-dropdown
Material Input group dropdown https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-groups.html#input-group-dropdown

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link http://v4-alpha.getbootstrap.com/components/input-group/
Classic Input Group https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-groups.html
Material Input Group https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-groups.html

Bootstrap TouchSpin

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

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="jquery.bootstrap-touchspin.js"></script>
                    <link rel="stylesheet" type="text/css" href="jquery.bootstrap-touchspin.css">
                
            
2. Call the TouchSpin-function after the page has loaded
                
                    $(".touchspin").TouchSpin();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link http://www.virtuosoft.eu/code/bootstrap-touchspin/
Classic Touchspin https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template#touchspin
Material Touchspin https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template#touchspin

Input Grids

Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.

Check input grid options below that can be used :

Input Grid Options Class Description
Extra small class prefix .col-* For extra small grids (<576px) for 1 to 12 grids.
Small class prefix .col-sm-* For small grids (≥576px) for 1 to 12 grids.
Medium class prefix .col-md-* For medium grids (≥768px) for 1 to 12 grids.
Large class prefix .col-lg-* For large grids (≥992px) for 1 to 12 grids.
Extra large class prefix .col-xl-* For extra large grids (≥1200px) for 1 to 12 grids.

Grid Options Examples :

Example Type URL
Classic Horizontal Grid https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#horizontal-grid
Material Horizontal Grid https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#horizontal-grid
Classic Grid With Row Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#grid-row-label
Material Grid With Row Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#grid-row-label
Classic Grid With Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#grid-with-label
Material Grid With Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#grid-with-label
Classic Grid With Left & Right Offset https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#left-right-offset
Material Grid With Left & Right Offset https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#left-right-offset
Classic Centered Input Grid https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#checkbox-input-grid
Material Centered Input Grid https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#checkbox-input-grid
Classic Grid with Inline Row Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#grid-with-inline-row-label
Material Grid with Inline Row Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#grid-with-inline-row-label
Classic Grid with Inline Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#grid-with-inline-label
Material Grid with Inline Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#grid-with-inline-label
Classic Multiple Inputs with Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html#multiple-input-with-labels
Material Multiple Inputs with Label https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html#multiple-input-with-labels

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.2/layout/grid/
Classic Grid https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-input-grid.html
Material Grid https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-input-grid.html

Extended Controls

Some extended controls are listed below.

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

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="jquery.inputmask.bundle.min.js"></script>
                
            
2. Call the inputmask-function after the page has loaded
                
                    $("#inputmask").inputmask();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link http://robinherbots.github.io/Inputmask
Classic Input Mask https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-extended-inputs.html#inputmask
Material Input Mask https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-extended-inputs.html#inputmask

Typeahead

When initializing a typeahead using the typeahead.js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="typeahead.bundle.min.js"></script>
                    <script src="bloodhound.min.js"></script>
                    <script src="handlebars.js"></script>
                
            
2. Call the typeahead-function after the page has loaded
                
                    $("#typeahead").typeahead();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://twitter.github.io/typeahead.js/examples/
Classic Type Head https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-extended-inputs.html#typeahead
Material Type Head https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-extended-inputs.html#typeahead

Bootstrap Maxlength

This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="bootstrap-maxlength.js"></script>
                
            
2. Call the maxlength-function after the page has loaded
                
                    $("#maxlength").maxlength();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link http://mimo84.github.io/bootstrap-maxlength/
Classic Max. Length https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-extended-inputs.html#maxlength
Material Max. Length https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-extended-inputs.html#maxlength

Checkbox

Form checkbox options with different classes and advance options.

Some checkbox options below that can be used :

Checkbox Options Class Description
Right Side checkbox .right-checkbox Use this class to add checkbox on right side.
Custom Checkbox .custom-input.custom-checkbox Use this class as a single wrapper & add <span class="custom-control--indicator"></span> for better output. Also use .custom-control-description class for checkbox description.
Color Checkbox .bg-* Use this class with THEME_COLOR for checkbox color.
Inline Checkbox .inline Use this class for inline checkbox option.
Image Checkbox .img-thumbnail Use this class to <img> tag after input type checkbox.

iCheck Checkbox
1. Initialize the plugin by referencing the necessary files:
                
                    <script src="icheck.min.js"></script>
                
            
2. Call the iCheck-function after the page has loaded
                
                    $('#icheck').iCheck({
                        checkboxClass: 'icheckbox',
                    });
                
            

You can change default color from javascript. Below are some options that can be used with iCheck checkbox :

iCheck Options Class Description
Basic Skin iCheck .icheck_minimal.skin Wrap checkbox input using this classes for basic icheck.
Square Skin iCheck .icheck_minimal.skin Wrap with this classes for square and colored checkbox.
Flat Skin iCheck .skin.skin-flat Wrap with this classes for flat colored checkbox.
Line Skin iCheck .skin.skin-line Wrap with this classes for line checkbox.
Polaris Skin iCheck .skin.skin-polaris Wrap with this classes for polaris checkbox.
Futurico Skin iCheck .skin.skin-futurico Wrap with this classes for futurico checkbox.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.2/components/forms/#checkboxes-and-radios
iCheck Plugin http://icheck.fronteed.com/
Classic Checkbox https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-checkboxes-radios.html
Material Checkbox https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-checkboxes-radios.html

Radio

Form radio options with different classes and advance options.

Some radio options below that can be used :

Radio Options Class Description
Right Side radio .right-radio Use this class to add radio on right side.
Custom Radio .custom-input.custom-radio Use this class as a single wrapper & add <span class="custom-control--indicator"></span> for better output. Also use .custom-control-description class for radio description.
Color Radio .bg-* Use this class with THEME_COLOR for radio color.
Inline Radio .inline Use this class for inline radio option.
Image Radio .img-thumbnail Use this class to <img> tag after input type radio.

iCheck Radio
1. Initialize the plugin by referencing the necessary files:
                
                    <script src="icheck.min.js"></script>
                
            
2. Call the iCheck-function after the page has loaded
                
                    $('#icheck').iCheck({
                        radioClass: 'iradio',
                    });
                
            

You can change default color from javascript. Below are some options that can be used with iCheck radio :

iCheck Options Class Description
Basic Skin iCheck .icheck_minimal.skin Wrap radio input using this classes for basic icheck.
Square Skin iCheck .icheck_minimal.skin Wrap with this classes for square and colored radio.
Flat Skin iCheck .skin.skin-flat Wrap with this classes for flat colored radio.
Line Skin iCheck .skin.skin-line Wrap with this classes for line radio.
Polaris Skin iCheck .skin.skin-polaris Wrap with this classes for polaris radio.
Futurico Skin iCheck .skin.skin-futurico Wrap with this classes for futurico radio.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.2/components/forms/#checkboxes-and-radios
iCheck Plugin http://icheck.fronteed.com/
Classic Radio Button https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-checkboxes-radios.html
Material Radio Button https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-checkboxes-radios.html

Switch

Turn checkboxes and radio buttons in switches.

Bootstrap Checkbox Toggle

This is a checkbox component based on Bootstrap framework.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="bootstrap-checkbox.min.js"></script>
                
            
2. Call the checkboxpicker-function after the page has loaded
                
                    $('#checkboxSwitch').checkboxpicker();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://vsn4ik.github.io/bootstrap-checkbox/
Classic Switch https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-switch.html#bootstrap-checkbox
Material Switch https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-switch.html#bootstrap-checkbox

Switchery Toggle

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="switchery.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="switchery.min.css">
                
            
2. Call the switchery-function after the page has loaded
                
                    var switchery = new Switchery('.switchery', { color: '#37BC9B' });
                
            

Some theme colored swichery using below option :

Switchery Option Class Description
Default switchery .switchery Default switchery class defind for this theme. That can be changed in JS.
Template colored switchery data-color="*" Use this data attribute to add THEME_COLOR options to checkbox with .switchery class.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link http://abpetkov.github.io/switchery/
Classic Swtichery Toggle https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-switch.html#switchery-toggle
Material Swtichery Toggle https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-switch.html#switchery-toggle

Select2

Select2 supports a wide variety of options that allow you to customize it to your needs.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="select2.full.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="select2.min.css">
                
            
2. Call the select2-function after the page has loaded
                
                    $(".select2").select2();
                
            

You have to add plugin js and css. Some options that can be possible with select2 below :

Select2 options Class Description
Basic select2 .select2 For basic select2, use this class. you can use this class for multiple select2 also.
Select2 with icon data-icon Use data attribute data-icon to add icon name for each options. And use class .select2-icons to set icon with option.
Sizes .select2-size-[lg/sm/xs] Use this class for large, small & extra small size of select2.
Background Color .select2-bg Use this class with data-bgcolor & data-bgcolor-variation attributes for background color of control.
Menu Background Color .select2-menu-bg Use this class with data-bgcolor & data-bgcolor-variation attributes for Menu background color.
Full Background Color .select2-full-bg Use this class with data-bgcolor & data-bgcolor-variation attributes for full select2 background color.
Border Color .select2-border Use this class with data-border-color & data-border-variation attributes for Border color of control.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://select2.github.io/
Classic Form Select https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-select2.html
Material Form Select https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-select2.html

Tags Input

Diffrent elements and styles of Tag Inputs.

Bootstrap Tag Inputs

jQuery plugin providing a Twitter Bootstrap user interface for managing tags.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="bootstrap-tagsinput.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="bootstrap-tagsinput.css">
                
            
2. Call the tagsinput-function after the page has loaded
                
                    $(".tagsinput").tagsinput();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
Classic Bootstrap Tag https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-tags-input.html#bootstrap-tags
Material Tag https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-tags-input.html#bootstrap-tags

Tagging JS

taggingJS is a jQuery plugin to create an high customizable front-end tag system.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="tagging.min.js"></script>
                    <link rel="stylesheet" type="text/css" href="tagging.css">
                
            
2. Call the tagging-function after the page has loaded
                
                    $(".tagging").tagging();
                
            

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Plugin Link http://sniperwolf.github.io/taggingJS/
Classic Tagging JS https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-tags-input.html#tagging-js
Material Tagging JS https://demos.pixinvent.com/modern-html-admin-template/html/ltr/material-vertical-menu-template/form-tags-input.html#tagging-js

Validation

Bootstrap includes validation styles for danger, warning, and success states on form controls.

1. Initialize the plugin by referencing the necessary files:
                
                    <script src="jqBootstrapValidation.js"></script>
                
            
2. Call the jqBootstrapValidation-function after the page has loaded
                
                    $(".jq-bs-validation").jqBootstrapValidation();
                
            

Some classes for bootstrap validation :

Validation Type Class Description
Validations .has-* To add validations like success, danger, info, warning to the parent element.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.2/components/forms/#validation
Plugin Link https://reactiveraven.github.io/jqBootstrapValidation/
Classic Form Validation https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-validation.html
Material Form Validation https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/form-validation.html