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 | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-inputs.html#input-types |
Input Style
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. |
More input style example can be like :
Example Type | URL |
---|---|
Input type examples | https://themeselection.com/demo/chameleon-admin-template/html/ltr/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 |
More form validation example can be like :
Example Type | URL |
---|---|
Form validation examples | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-inputs.html#validation |
Tooltip validation examples | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-inputs.html#tooltip-validation |
Turn checkboxes and radio buttons in switches.
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 | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-switch.html#switchery-toggle |
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 | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-select2.html |
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. |
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.1/components/forms/#checkboxes |
iCheck Plugin | http://icheck.fronteed.com/ |
Template Page | https://themeselection.com/demo/chameleon-admin-template/html/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. |
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.1/components/forms/#radios |
iCheck Plugin | http://icheck.fronteed.com/ |
Template Page | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-checkboxes-radios.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 | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-tags-input.html#tagging-js |
Bootstrap includes validation for Custom styles, Browser defaults, Server side & Tooltips
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 | .is-valid & .is-invalid |
you can indicate invalid and valid form fields. |
Server side Validations | :invalid & :valid |
To apply styles to your form controls. |
Server side Validations | .{valid|invalid}-feedback for .{valid|invalid}-tooltip |
To display validation feedback in a styled tooltip. |
Refer following links for detailed documentation, configuration options, methods and examples:
Some extended controls are listed below.
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:
Formatter
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 | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-extended-inputs.html#formatter |
Card
Make your credit card form better in one line of code. To use, you'll need to include the Card JavaScript files into your HTML, no CSS link is necessary as the JavaScript file does this for you.
1. Initialize the plugin by referencing the necessary files:
<script src="jquery.card.js"></script>
2. Call the card after the page has loaded
$('.card-form').card({
// a selector or DOM element for the container
// where you want the card to appear
container: '.card-wrapper', // *required*
});
Refer following links for detailed documentation, configuration options, methods and examples:
Type | URL |
---|---|
Plugin Link | https://github.com/jessepollak/card |
Template Page | https://themeselection.com/demo/chameleon-admin-template/html/ltr/vertical-menu-template/form-extended-inputs.html#createCard |