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.

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.
Horizontal Input .form-control-[lg/sm] Use this class for different input sizing.
Floating Label Input .form-label-group Add .form-label-group class to the parent of input and label tags to have floating label form styling.
Input Sizing .form-control-[lg/sm] To make label in center of form-control, use .col-form-label class with element. This is default bootstrap class.
Input with Icons .has-icon-left Default icon align is right. For left align icon 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 states .{is-valid/is-invalid} For indicate invalid and valid form fields, use this class with .form-control.
Input Validation with Tooltips .{valid/invalid}-tooltip Use .needs-validation with <form> for Input Validation states with tooltip, .{valid/invalid}-feedback classes for .{valid/invalid}-tooltip classes to display validation feedback in a styled tooltip.

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

Type URL
Plugin Link https://getbootstrap.com/docs/4.3/components/forms/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-inputs.html

Textarea Input

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.

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

Type URL
Plugin Link https://getbootstrap.com/docs/4.3/components/forms/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-textarea.html

Switch

Some options that can be possible with Switch below :

Switch options Class Description
Basic Swtich .custom-control-label Use class .custom-control-label to make a custom switch.
Switch with Glow .custom-switch-glow Use this class for glowing switch alongwith .custom-switch.
Switch with Shadow .custom-switch-shadow Use this class for switch with shadow alongwith .custom-switch.
Colors .custom-switch-#{$color-name} Use this class with .custom-switch to create a switch with colors.
Icons switch-icon-{left / right} Use this class inside of .custom-control-label to create a switch with icon.

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

Type URL
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-switch.html

Checkbox

Form checkbox options with different classes and advance options.

Some checkbox options below that can be used :

Checkbox Options Class Description
Frest Checkboxes .checkbox To add a checkBox, we have the .checkbox as a wrapper. Also use .checkbox-input in input tag and set label for better output.
Custom Checkbox .custom-control .custom-checkbox Add .custom-control .custom-checkbox as a single wrapper and add .custom-control-label for better output.
Checkbox with Colors .checkbox-{colorName} To change the color of the checkBox, use the checkbox-{colorName} for primary, secondary, success, danger, info, warning.
Checkbox Glow .checkbox-glow Use class .checkbox-glow class with .checkbox.checkbox-{colorName} for glow effect to Checkboxes. Glow shadow color will be changed according to Colored Checkboxes.

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
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-checkbox.html

Radio

Form radio options with different classes and advance options.

Some radio options below that can be used :

Radio Options Class Description
Frest Radio Buttons .radio Add .radio as a single wrapper & add <label> with for attribute to get better output.
Custom Radio Buttons .bg-{colorName} Add .custom-control.custom-radio as a single wrapper & add .custom-control-label for better output.
Colored Radio Buttons .radio-{colorName} To change the color of the Radio Buttons, use the radio-{colorName} for primary, secondary, success, danger, info, warning.
Radio Glow .radio.radio-{colorName} Use class .radio-glow class with .radio.radio-{colorName} for glow effect to Radio Buttons. Glow shadow color will be changed according to Colored Checkboxes.
Radio Buttons Shadow .radio-shadow Use class .radio-shadow class with .radio for shadow effect to Radio Buttons.
Radio Size .radio-sm To add a Radio Buttons with different sizes, we have the .radio-sm class for small Radio Buttons. Add it alongwith .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
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-radio.html

Input Group

Form Input Group options with different classes and advance options.

Inout Group Options Class Description
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/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-input-groups.html

Number Input

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/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-number-input.html

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

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

Type URL
Plugin Link https://select2.github.io/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-select.html

Quill Editor

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

Note: to change fonts of quill editor you'll have to import your required font family in css and change editor fonts.

1. Initialize the plugin by referencing the necessary files:
              
                  <link href="quill.snow.css" rel="stylesheet">
                  <script href="quill.js"> <script>
              
            
2. Create the editor container:
                
                    <div id="editor">
                    </div>
                
            
3. Basic usage looks something like this.
                  
                      var quill = new Quill('#editor', {
                        theme: 'snow'
                      });
                  
            
Type URL
Plugin Link https://quilljs.com/
Github Page https://github.com/quilljs/quill
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-quill-editor.html

File Uploader

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.

1. Initialize the plugin by referencing the necessary files:
                        
                            <script src="/path/to/dropzone.min.js"></script>
                        
                    
2. The typical way of using dropzone is by creating a form element with the class dropzone. That’s it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. The uploaded files can be handled just as if there would have been a html input.
                        
                            <form action="/file-upload" class="dropzone">
                                <div class="fallback">
                                    <input name="file" type="file" multiple />
                                </div>
                            </form>
                        
                    
3. Alternatively you can create dropzones programmatically (even on non form elements) by instantiating the Dropzone class
                        
                            // Dropzone class:
                            var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
                        
                    
                        
                            // jQuery
                            $("div#myId").dropzone({ url: "/file/post" });
                        
                    

Notes


  • If you do not want the default message at all (»Drop files to upload (or click)«), you can put an element inside your dropzone element with the class dz-message and dropzone will not create the message for you.
  • Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the params option.
  • Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it’s an image, as well as file.upload which is an object containing: progress (0-100), total (the total bytes) and bytesSent.
  • If you want to add additional data to the file upload that has to be specific for each file, you can register for the sending event:
                                    
                                        myDropzone.on("sending", function(file, xhr, formData) {
                                            // Will send the filesize along with the file as POST data.
                                            formData.append("filesize", file.size);
                                        });
                                    
                                
  • To access the preview html of a file, you can access file.previewElement. For example:
                                    
                                        myDropzone.on("addedfile", function(file) {
                                            file.previewElement.addEventListener("click", function() {
                                                myDropzone.removeFile(file);
                                            });
                                        });
                                    
                                
  • If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the previewsContainer option. The previewsContainer should have the dropzone-previews or dropzone class to properly display the file previews.
                                    
                                        new Dropzone(document.body, {
                                            previewsContainer: ".dropzone-previews",
                                            // You probably don't want the whole body
                                            // to be clickable to select files
                                            clickable: false
                                        });
                                    
                                
  • Look at the here for more examples.

Date & Time Picker

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
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-date-time-picker.html

DateRange Picker

The basic setup requires targetting an input element and invoking the picker.

Initialize the plugin by referencing the necessary files:
                    
                        <script src="moment.min.js"></script>
                        <script src="daterangepicker.js"></script>
                        <link rel="stylesheet" type="text/css" href="daterangepicker.css">
                    
                

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

Type URL
Plugin Link https://www.daterangepicker.com/
Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/form-date-time-picker.html#daterange