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.
Use different types of class with .form-control class which contains input 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 | ..form-control-[lg/sm] |
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 with form-group. |
| Input with Icons Divider | .has-icon-left.input-divider-[left/right] |
For use divider between icon and input text box use this class with form-group. |
| Custom File Input | .custom-file .custom-file-input |
For Custom File Input, use .custom-file-input class within .custom-file class. |
| Input Validation with Tooltips | .{valid/invalid}-tooltip |
For use Tooltip Validation use this class and add js code for template page. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.3/components/forms/ |
Floating Labels are used for inline styling where form controls comes before its label. Add .form-label-group class to the parent of input and label tags to have floating label form styling.
You can always add more stuff like form sections, form control borders, tooltips, icons, round form controls, square form controls etc..
HTML Markup:
<div class="form-label-group">
<input type="text" class="form-control" id="floating-label1" placeholder="Label-placeholder">
<label for="floating-label1">Label-placeholder</label>
</div>
Textarea input options with different classes and advance options.
Some textarea input options below that can be used :
| Textarea Input Options | Class | Description |
|---|---|---|
| Floating Label | .form-label-group |
Use .form-label-group to add a Floating Label with Textarea. |
| Counter | .char-textarea |
Use .char-textarea with textareatag for counting text-length. |
Some options that can be possible with Switch below :
| Switch options | Class | Description |
|---|---|---|
| Basic Swtich | .switch-label |
Use class .switch-label to add a label to switch. |
| Colors | .custom-switch-#{$colorName} |
Use this class to change switch's color alongwith .switch-label. |
| Text | .switch-text-left & .switch-text-right |
Use the both classes inside of .custom-control-label to create a switch with text. |
| Icons | .switch-icon-left & .switch-icon-right |
Use the both classes inside of .custom-control-label to create a switch with icon. |
| Sizes | .switch-{md / lg} |
Use this class with .custom-switch for medium or large size |
Form checkbox options with different classes and advance options.
Some checkbox options below that can be used :
| Checkbox Options | Class | Description |
|---|---|---|
| TPro Checkboxes | .vs-checkbox-con |
To add a checkBox, we have the .vs-checkbox-con as a wrapper. Also use .vs-checkbox for better output. |
| Color Checkbox | .vs-checkbox-{value} |
To change the color of the checkBox use the .vs-checkbox-{value} for different colors. |
| Checkbox with Icons | .vs-icon |
Use .vs-icon to change change the internal icon inside the checkbox. |
| Checkbox Sizes | .vs-checkbox-{sm/lg} |
To add a checkBox with different sizes, we have the this classes for different sizes with .vs-checkbox class. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.3/components/input-group/#checkboxes-and-radios |
Form radio options with different classes and advance options.
Some radio options below that can be used :
| Radio Options | Class | Description |
|---|---|---|
| TPro Radio Buttons | .vs-radio-{colorName} |
To change the color of the radio use the .vs-radio-{colorName} for different colors. |
| Radio Sizes | .vs-radio-{sm/lg} |
To add a radio with different sizes, we have the this classes for different sizes with .vs-radio class. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.3/components/input-group/#checkboxes-and-radios |
Form Input Group options with different classes and advance options.
| Inout Group Options | Class | Description |
|---|---|---|
| With Checkbox / Radio | .vs-{checkbox/radio}-con |
To add checkbox or radio button with input groups, use this class. |
| Different Sizes | .input-group-{lg/sm} |
Add this class to .input-group for Large/Small addon/prepend. |
| With Buttons | .input-group-btn |
Add span with .input-group-btn class and add button inside before or after <input> |
| With Dropdown | .dropdown-toggle |
Add <button> with .dropdown-toggle class and add dropdown-menu after it to get input group with dropdown. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://getbootstrap.com/docs/4.3/components/input-group/ |
Number input options with different classes and advance options. Using Bootstrap Touchspin plugin for Number Input Element.
Some number input options below that can be used :
| Number Input Options | Class | Description |
|---|---|---|
| Touchspin | .touchspin |
Add .touchspin class with input tag to add touchspin input group |
| Decimal | data-bts-step & data-bts-decimals |
Set data-bts-step and data-bts-decimals attributes for decimal type Input Touchspin. |
| Min - Max | min and max |
Set min and max attributes values for minimum and maximum in page js file. |
| Step | step |
Set step attribute value in page js file. |
| Decimal | data-bts-button-down-class & data-bts-button-up-class |
set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-{color} for different colors spinner. |
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://www.virtuosoft.eu/code/bootstrap-touchspin/ |
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. Use multiple="multiple" attribute for multiple select box. |
| 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] |
Use this class for large & small size of select2. |
| Background Color | .select2-bg |
Use this class with data-bgcolor & data-bgcolor-variation attributes for background color of control. |
| 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/ |
The basic setup requires targetting an input element and invoking the picker.
Initialize the plugin by referencing the necessary files:
<script src="picker.js"></script>
<script src="picker.date.js"></script>
<script src="picker.time.js"></script>
<script src="legacy.js"></script>
<link rel="stylesheet" type="text/css" href="pickadate.css">
Refer following links for detailed documentation, configuration options, methods and examples:
| Type | URL |
|---|---|
| Plugin Link | https://amsul.ca/pickadate.js/ |
| Github Page | https://github.com/amsul/pickadate.js |