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 |
|---|---|
| Input type examples | http://demo.pixinvent.com/robust-admin/ltr/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 |
|---|---|
| Input type examples | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-inputs.html#input-style |
Input Font Options
Check input font options below :
| Input Font | Class | Description |
|---|---|---|
| Normal Font | .font-weight-normal |
Use this class for normal font weight. |
| Bold Font | .font-weight-bold |
Use this class for bold font weight. |
| Italic Font | .font-weight-italic |
Use this class for italic font weight. |
| Lowercase Font | .text-lowercase |
Use this class for lowercase font. |
| Capitalized Font | .text-capitalize |
Use this class for capitalize font. |
| Uppercased Font | .text-uppercased |
Use this class for uppercased font. |
| Left Aligned Text | .text-xs-left |
Use this class for left align text in input. |
| Center Aligned Text | .text-xs-center |
Use this class for center align text in input. |
| Right Aligned Text | .text-xs-right |
Use this class for right align text in input. |
| Large Font | .font-size-large |
Use this class for large size font. |
| Small Font | .font-size-small |
Use this class for small size font. |
| Extra Small Font | .font-size-xsmall |
Use this class for extra small size font. |
More input font example can be like :
| Example Type | URL |
|---|---|
| Input type examples | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-inputs.html#input-font |
Input Form Helpers
Check input form Helpers below :
| Form Helpers | Class | Description |
|---|---|---|
| Simple Helper Text | .text-muted |
Use this class to set light colored helper text. |
| Helper Tag Text | .tag.tag-* |
This class used for helper tags. Use any colors for helper tags. |
| Block Helper Text | .block-tag |
Use this class for block helper text. |
| Aligned Helper Text | text-xs-[left/center/right] |
For left/center/right aligned helper text. |
More form helpers example can be like :
| Example Type | URL |
|---|---|
| Form helpers examples | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-inputs.html#form-helpers |
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 |
|---|---|
| Form validation examples | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-inputs.html#validation |
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 :
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Bootstrap Link | http://v4-alpha.getbootstrap.com/components/input-group/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/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/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template#touchspin |
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-xs-* |
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 :
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Bootstrap Link | http://v4-alpha.getbootstrap.com/layout/grid/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-input-grid.html |
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 |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-extended-inputs.html#inputmask |
Formatter
Sometimes it is useful to format user input as they type. Existing libraries lacked proper functionality / flexibility. Formatter was built from the ground up with no dependencies. There is however a jquery wrapper version for quick use.
1. Initialize the plugin by referencing the necessary files:
<script src="formatter.min.js"></script>
2. Call the formatter-function after the page has loaded
$("#formatter").formatter();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://firstopinion.github.io/formatter.js/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-extended-inputs.html#formatter |
Card
Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.card.js"></script>
2. Call the card-function after the page has loaded
$("#card").card();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://jessepollak.github.io/card/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-extended-inputs.html#createCard |
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/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/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/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-extended-inputs.html#maxlength |
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 | http://v4-alpha.getbootstrap.com/components/forms/#checkboxes |
| iCheck Plugin | http://icheck.fronteed.com/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-checkboxes-radios.html |
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 | http://v4-alpha.getbootstrap.com/components/forms/#radios |
| iCheck Plugin | http://icheck.fronteed.com/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-checkboxes-radios.html |
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/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-switch.html#bootstrap-checkbox |
Bootstrap Switch
Turn checkboxes and radio buttons in toggle switches.
1. Initialize the plugin by referencing the necessary files:
<script src="bootstrap-switch.min.js"></script>
2. Call the bootstrapSwitch-function after the page has loaded
$('#bs-switch').bootstrapSwitch();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://github.com/nostalgiaz/bootstrap-switch |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-switch.html#bootstrap-switch |
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/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-switch.html#switchery-toggle |
Different select plugins listed below with it's options, description with plugin links.
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/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-select2.html |
Selectize
Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.
1. Initialize the plugin by referencing the necessary files:
<script src="selectize.min.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css">
<link rel="stylesheet" type="text/css" href="selectize.default.css">
2. Call the selectize-function after the page has loaded
$(".selectize").selectize();
Some selectize options that are listed below :
- Basic Selectize input
- Selectize multiple select
- Confirm On Remove
- Sort options of group
- Contact selector like Email apps
- Integrate third-party repository
- Selectize with Remove Button tags
- Drag & Drop options
- RTL selectize, etc...
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://selectize.github.io/selectize.js/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-selectize.html |
Selectivity
Modular and light-weight selection library.
1. Initialize the plugin by referencing the necessary files:
<script src="selectivity-full.min.js"></script>
<link rel="stylesheet" type="text/css" href="selectivity-full.min.css">
2. Call the selectivity-function after the page has loaded
$(".selectivity").selectivity();
Some selectivity options that are listed below :
- Selectivities with select box
- Selectivities with select input and without search
- Selectivity with submenus
- Selectivity with tags input
- Selectivity with Background Color. Use
.bg-*&.border-*from background ∧ border colors. - , etc...
- Selectivity sizes using .select-[xl/lg/sm/xs] for Extra Large, Large, Small & Extra Small select.
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://selectize.github.io/selectize.js/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-selectize.html |
Select Box It
SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. SelectBoxIt also provides first-class support for mobile, tablet, and desktop browsers, triggering the native "wheel" interface for mobile and tablet devices.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.selectBoxIt.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.selectBoxIt.css">
2. Call the selectBoxIt-function after the page has loaded
$(".selectBoxIt").selectBoxIt();
You have to add plugin js and css. Some options that can be possible with select box it are below :
| Select box it options | Class | Description |
|---|---|---|
| Basic SelectBoxIt | .selectBox |
Use this class to select, for basic SelectBoxIt field. |
| SelectBoxIt Open/close Effects | .selectBox-effect |
Use this class to select, for opening & Closing effects. That effects can be changed from js. |
| SelectBoxIt Open/close Animations | .selectBox-animation |
Use this class to select, for opening & Closing animations. That animations can be changed from js. |
| Custom text | data-selectedtext |
Use this attribute to select option for custom text value. |
| Prevent Closing | data-preventclose |
Use this attribute to prevent closing the select box. |
| Change icon | .selectBox-right-icon |
Use this class to change down arrow icon. |
| Custom Image support | data-iconurl |
Use this attribute and Image URL as value to show Image. |
| Bootstrap Arrow support | .bootstrap-icon |
Use this class to change down arrow icon as bootstrap icon. |
| Fixed Width | .selectBox-fixed |
Use this class for fixed width. |
| Border Color Options | .border-* |
Use this class for different border THEME_COLOR options. |
| SelectBox Color Options | .bg-* |
Use this class for different background THEME_COLOR options. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://gregfranko.com/jquery.selectBoxIt.js/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-select-box-it.html |
Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-duallistbox.min.css">
2. Call the bootstrapDualListbox-function after the page has loaded
$(".duallistbox").bootstrapDualListbox();
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | http://www.virtuosoft.eu/code/bootstrap-duallistbox/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-dual-listbox.html |
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:
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/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-tags-input.html#tagging-js |
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 | http://v4-alpha.getbootstrap.com/components/forms/#validation |
| Plugin Link | https://reactiveraven.github.io/jqBootstrapValidation/ |
| Template Page | http://demo.pixinvent.com/robust-admin/ltr/vertical-menu-template/form-validation.html |