Input

Bootstrap’s form controls expand on 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:

Options Class Description
Rounded Input .round Use this class for round styled input.
Square Input .square Use this class for square styled input.
Input Sizes .form-control-[lg/sm] Use this class for different input sizes.
Horizontal Form Label Sizing .col-form-label-[lg/sm] Be sure to use this class to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
Floating Labels .form-floating Use this class as a wrapper of .form-control and <label> elements for floating labels.
Input Validation States .is-{valid | invalid}, .{valid | invalid}-feedback To show input with validation state, use .is-{valid | invalid} class along with .form-control class and use .{valid | invalid}-feedback class as a sibling of .form-control class to show feedback message.
Input Validation with Tooltips .needs-validation, .{valid/invalid}-tooltip .needs-validation class must be used along with <form> element. Use .{valid/invalid}-tooltip class as a sibling of .form-control class to show message in tooltip on validation.

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

Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Options Class Description
Input Group .input-group Use this class to make input related elements in one line.
Prepend & Append Element .input-group-text Use .input-group-text class before/after input elements to prepend/append item to the input-group.
Merge Input Group .input-group-merge Use this class along with .input-group class and use .input-group-text as a child of this class. Use Merged input group to remove border between prepend/append element and input element.

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

Input Mask

Cleave.js helps you format input text content automatically. It provides an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.
Read the official Cleave.js Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<script src="cleave.min.js"></script>
<script src="cleave-phone.{country}.js"></script>

      
2. Binding to existing DOM element.

<input type="number" class="input-phone" />

      
3. Basic usage looks something like this:

var cleave = new Cleave('.input-phone', {
  phone: true,
  phoneRegionCode: '{country}'
});

      

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

Textarea Input

Textarea input options with different classes and advance options:

Options Class / Attribute Description
Floating Label .form-floating Use this class as a wrapper of textarea.form-control element and <label> element to add a Floating Label with textarea.
Counter .char-textarea, [data-length="{number}"], .textarea-counter-value, .char-count Use .char-textarea class and [data-length="{number}"] attribute along with <textarea> element for counting text-length. You need to add .textarea-counter-value class after textarea's wrapper and use .char-count class as a child of .textarea-counter-value to show counting number and maximum number of characters that can be typed.

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

Checkbox

Checkboxes are used for selecting one or several options in a list.

Options Class Description
Basic Checkbox .form-check, .form-check-input, .form-check-label For basic checkbox, use .form-check class as a wrapper of .form-check-input class with input[type="checkbox"] and .form-check-label class with label element.
Colored Checkbox .form-check-{color} Use this class along with .form-check classes to change color of checkbox.

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

Radio

Radios are used for selecting one option from many.

Options Class Description
Basic Radio .form-check, .form-check-input, .form-check-label For basic radio, use .form-check class as a wrapper of .form-check-input class with input[type="radio"] and .form-check-label class with label element.
Custom Radio .form-check, .form-check-input, .form-check-label For custom radio, use .form-check classes as a wrapper of .form-check-input class with input element and .form-check-label class with label element.
Colored Radio .form-check-{color} Use this class along with .form-check classes to change color of checkbox.

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

Custom Options

We have used radio and checkbox to create these custom options elements. Its behavior is the same as radio and checkbox but its look is different.

Options Class Description
Custom Options Radio .custom-options-checkable
.custom-option-item-check
.custom-option-item
.custom-option-item-title
For custom options,
  • Use .custom-options-checkable class as a wrapper
  • Use.custom-option-item-check class to radio input
  • Use .custom-option-item class to label element
  • Use .custom-option-item-title class to title of your content
Custom Options Checkbox .custom-options-checkable
.custom-option-item-check
.custom-option-item
.custom-option-item-title
For custom options,
  • Use .custom-options-checkable class as a wrapper
  • Use .custom-option-item-check class to radio input
  • Use .custom-option-item class to label element
  • Use .custom-option-item-title class to title of your content

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

Switch

Some options with Switch are as follows:

Options Class Description
Basic Switch .form-check. form-switch , .form-check-input, .form-check-label For basic switch, use .form-check. form-switch classes as a wrapper of .form-check-input class with input element and .form-check-label class with label element.
Colored Switch .form-check-{color} Use this class along with .form-check. form-switch classes to change color of switch.
Switch with Icon .switch-icon-{left | right} Use these classes as children of .form-check-label class for icons on either side of a switch. Use .switch-icon-left class for icon on left side and .switch-icon-right class for icon on right side inside the switch itself.

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

Basic Select

Select one or more option from a drop-down list.

Options Class / Attribute Description
Basic Select .form-select Wrap all options with select.form-select.
Select Sizes .form-select-{sm | lg} Use this class along with select.form-select for different sizes of select.
Multiple Select [multiple] Use this attribute along with select element to select multiple options.

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

Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets and many other highly used options.
Read the official Select2 Documentation for a full list of instructions and other options.

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. Binding to existing DOM element.

<select class="basic-select2" name="state">
    <option value="AL">Alabama</option>
        ...
    <option value="WY">Wyoming</option>
</select>

      
3. Basic usage looks something like this:

$(".basic-select2").select2();

      

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

Number Input

Bootstrap TouchSpin is a mobile and touch friendly input spinner component.
Read the official Bootstrap TouchSpin Documentation for a full list of instructions and other options.

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. Binding to existing DOM element.

<div class="input-group">
    <input type="text" class="touchspin" value="{number}" />
</div>

      
3. Basic usage looks something like this:

$('.touchspin').TouchSpin({
    min: 0,
    max: 100,
    step: 0.1,
    decimals: 2,
    buttondown_class: 'btn btn-primary',
    buttonup_class: 'btn btn-primary',
    buttondown_txt: feather.icons['minus'].toSvg(),
    buttonup_txt: feather.icons['plus'].toSvg()
});

      

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

File Uploader

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
Read the official DropzoneJS Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="dropzone.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/forms/form-file-uploader.css">

      
2. Binding to existing DOM element.

<form action="#" class="dropzone dropzone-area" id="my-awesome-dropzone">
  <div class="dz-message">Drop files here or click to upload.</div>
</form>

      
3. Basic usage looks something like this:

$('#my-awesome-dropzone').dropzone({
    // options
    ...
});

      

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

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.
Read the official Quill Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="quill.min.js"></script>
<link rel="stylesheet" type="text/css" href="quill.snow.css">
<link rel="stylesheet" type="text/css" href="quill.bubble.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/forms/form-quill-editor.css">

      
2. Binding to existing DOM element.

<div id="editor">
    ...
</div>

      
3. Basic usage looks something like this:

var quill = new Quill('#editor', {
    ...
});

      

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

Date & Time Picker

Flatpickr

Flatpickr is a lightweight and powerful datetime picker.
Read the official Flatpickr Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="flatpickr.min.js"></script>
<link rel="stylesheet" type="text/css" href="flatpickr.min.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/forms/pickers/form-flat-pickr.css">

      
2. Binding to existing DOM element.

<input type="text" id="basic-flatpickr" />

      
3. Basic usage looks something like this:

$('#basic-flatpickr').flatpickr();

      
Pickadate

Pickadate is mobile-friendly, responsive, and lightweight jQuery date & time input picker.
Read the official Pickadate Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="picker.js"></script>
<script src="picker.date.js"></script>
<script src="picker.time.js"></script>
<link rel="stylesheet" type="text/css" href="pickadate.css">

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/forms/pickers/form-pickadate.css">

  
2. Binding to existing DOM element.

<input type="text" id="basic-pickadate" />

  
3. Basic usage looks something like this:

$('#basic-pickadate').pickadate();

  

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